html - 使用 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

你可以这样做：

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

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

Answer 3

要使用overflow:hidden;，您需要为 指定宽度div，否则浏览器将不知道何时隐藏。我编辑了你的小提琴以表明：

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

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