我正在嘗試爲我的網站製作一個「前奏」部分，該部分應占用當前（加載頁面時）的大約80％的視口高度幷包含兩個圖像：一個在該部分的左側和一個右側。在這兩張圖片下面，應該顯示一個向下箭頭，戲弄客戶向下滾動下一部分。使響應圖像填充百分比高度的div
事情是，如果我將我的介紹div設置爲height: 80%並將圖片width:100%設置爲使其響應，則會溢出設置爲80％高度的介質div。
我做了一個樣本codepen來說明我的問題。
我將不透明度設置爲0.5，以便您可以看到我的介紹div的位置。
有什麼辦法讓圖像適合他們的div，我不需要在我的介紹div上放overflow:hidden;？
在此先感謝。
對於這種情況，你可能會想在申報單，而不是正常的img標籤使用背景圖片：
<div style="background-image:url(myimage.jpg)"></div>
在這些div，設置以下的css：
background-size:cover;
如果您有一個在jsfiddle.net或類似的開始演示，我可以幫助更多的細節。
謝謝！ :-)我在這裏創建了這個jsfiddle：https：//jsfiddle.net/yw7yqvd3/將它設置爲background-size：cover使得它不能填充容器的寬度，但高度是正確的。我想我從這裏的瀏覽器問得太多了;-) –
@BoMortensen我不明白你總是希望100％的寬度和100％的高度？ – DaniP
DaniP：我想我只是想讓圖像儘可能在div中居中。不知道這是可能的。我會堅持使用@ kthornbloom的解決方案來使用背景大小：封面。使用background-image，我不必在div中使用'position：absolute;'在文本，按鈕等元素上:-) –
您可以使用視口高度單位，例如：height: 80vh;但與width: 100%;一起使用它可能會破壞您的圖像寬高比;正如之前kthornbloom所說的，你可以使用背景圖像填充整個父元素。
背景圖像是要走的路。請注意，您必須添加高度：100％; to #intro div以繼承父元素的高度
嗯在某些時候img將需要溢出容器或寬度或高度，如果你想覆蓋整個div而不扭曲img – DaniP