圖片應響應，並應充滿整個屏幕

上我有一個名爲第一和第二2個div的，我已經設置了寬度，並將它們的高度爲100％圖片應響應，並應充滿整個屏幕

.first{ 
    width : 100%; 
    height : 100%; 
} 
.second{ 
    width : 100%; 
    height : 100%; 
}

現在我想補充一個圖像在每個div中。這些圖像應該填寫整個div。

<img src="someimage.png" width="100%" height="100%"/>

我的問題是圖像不應伸展它應填充整個屏幕。我已經使用img img-responsive類來實現這一點。圖像現在變得沒有伸展的填充，但是當調整大小時，它會被調整大小，並且它的高度也會下降，因此圖像的高度現在沒有達到100％。是否有任何方法可以實現圖像的寬度和高度，以覆蓋整個屏幕而不會拉伸和降低高度？

來源

2016-11-19 Harish

不是真的......你必須考慮你的屏幕可能不是別人。您可以將圖像的寬度設置爲100％，但是圖像的限制會在高度上被取消。如果你想更確定的話，你應該拍攝一張具有足夠高度或接受拉伸的圖像。 – Daniel

實現此目的的最佳方式是使用圖像作爲div的背景，而不是將其添加爲圖像。你能做到嗎？或者你需要它作爲單獨的標籤嗎？ – phobia82

檢查了這一點，你應該使用width: 100%min-height: 100%身邊，但我recommend你使用background-image與background-size: cover

.first{ 
    width : 100%; 
    height : 100%; 
} 

body, html { 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 

.first img { 
    width: 100%; 
    min-height: 100%; 
} 

<div class="first"> 
<img alt="" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97500&w=500&h=500"/> 
</div>

jsFiddle

來源

2016-11-19 08:49:11 Pedram

謝謝。我會試試看。 – Harish