如何切斷圖片以防止滾動？

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