使用css正确放置图像

Question

我有一个图像。这个图像应该有100％的高度。所以，在我的CSS中，我定义了高度：100％。问题是相应的宽度，因为这个图像是一个全景图，它肯定会超过视口尺寸。我不希望发生这种情况。有没有像溢出一样的方法：在最大视口宽度之后隐藏以完全隐藏图像的一部分。

HTML

<div id="image"> 
    <img src="http://photoblogstop.com/wp-content/uploads/2012/07/Sierra_HDR_Panorama_DFX8048_2280x819_Q40_wm_mini.jpg"/> 
</div> 

CSS

#image { 
    height: 100%; 
} 

这里的小提琴也是如此。 http://jsfiddle.net/AH3Hd/

Answer 1

将此CSS添加到您的div。你需要给它一个宽度，否则它会自动适应任何内容。

div { 
    width:100%; 
    overflow:hidden; 
} 

http://jsfiddle.net/AH3Hd/4/

Answer 2

要使用overflow:hidden;，你需要指定一个宽度为div，否则浏览器将不知道什么时候躲起来。我编辑你的小提琴表明：

#image { 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

http://jsfiddle.net/AH3Hd/6/

Answer 3

你可以做这样的事情：

#image { 
    overflow: hidden; 
    height:300px; // Depends on the size you want 
    width:300px; 
} 
#image img{ 
    height:100%; 
} 

这里的小提琴：http://jsfiddle.net/jwvanveelen/AH3Hd/7/