html - 如何切断图片以防止滚动？

Question

我的页面底部有一个高大的图像；我希望它根据浏览器的高度切断，这样页面就不能滚动（基本上是为了让更高分辨率的显示器显示更多的图像）。是这样的：

<div id="container" style="height:100%;">
<div> (blah blah blah) </div>
<div id="photo"><img ...></div></div>

现在 img 正在溢出容器，因此背景仅与浏览器屏幕一样大（应该如此），但 img 继续超过页面末尾。如何切断图像的底部以使其与容器一起停止？

Answer 1

style="overflow: hidden"这将切断容器中的任何溢出。

Answer 2

您还可以将背景设置<div id="photo"></div>为照片图像而不是使用元素，以便图像将缩放到页面宽度。

#photo {
   background: ('photo.jpg') no-repeat;
   background-size: 100% auto;
}