如何剪切图片以防止滚动？

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