CSS橫幅圖像，不會縮放到父元素之外

我正在嘗試爲網站設計一個特殊橫幅圖像，以便對於較窄的視口，垂直高度得以保持，並且圖像通過超越而有效地保持相同的大小父元素水平。（我認爲這是相當典型的橫幅圖片行爲 - 但如果我錯了，隨時糾正我）。（瀏覽器目標是ie10及以上）。下面不正確地保持圖像比例和100％寬度，以便如果未能匹配父級的高度。CSS橫幅圖像，不會縮放到父元素之外

當前HTML只是div標籤

<div class="banner"> 
<img class="img-fluid" src="somepic.jpg" /> 
</div>

在哪裏使用的CSS類是內一個img：

.banner { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 780px; 
}

和IMG-流體是自舉（4）類

img-fluid { 
    max-width: 100%; 
    height: auto; 
}

來源

2017-10-05 Yunti

「較窄的視口」意味着您有一些媒體查詢CSS用於較小的屏幕。那個CSS在哪裏？而且，擴展到左/右邊緣之外將需要完全不同的CSS。 –

您的'.banner'的寬度爲100％，這意味着它將跨越其容器的100％寬度。您的圖片的最大寬度爲100％，高度自動（默認），這意味着您的圖片將跨越其父項的最大100％寬度。所以它表現得像編碼一樣，它將是100％寬度和高度自動。它永遠不會離開它的容器 – Huangism

改爲使用背景圖像，可以使用一些有趣的行爲來實現不同的結果。

這是我的看法：

.banner { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    top: 0; 
    left: 0; 
    height: 780px; 
    background-image:url('somepic.jpg'); 
    background-size:cover; 
}

這裏的關鍵是background-size:cover;，這將確保圖像延伸到覆蓋整個寬度和高度，同時保持其比例。這意味着在非常寬的屏幕上，它會變得更大，從而降低一些高度。但在較薄的分辨率下，您將獲得所需的輸出。

來源

2017-10-05 15:37:33 Salketer

感謝您爲我提供的內容添加了「背景位置：中心」。你目前的方式只顯示圖像的左側部分而不是中心，這是我所需要的。 – Yunti

CSS橫幅圖像，不會縮放到父元素之外

回答

相關問題