使用css正确放置图像

Question

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

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/