html - 使用CSS正确放置图像

Question

我有一张图片。此图像应具有 100% 的高度。所以，在我的 CSS 中，我定义了 height: 100%。问题是各自的宽度，因为这个图像是全景图，它肯定会超过视口(viewport)尺寸。我不希望这发生。有没有办法像 overflow: hidden 一样完全隐藏最大视口(viewport)宽度之后的图像部分。

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%;
}

这也是 fiddle 。 http://jsfiddle.net/AH3Hd/

Answer 1

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

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

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