CSS：自動計算元素的高度以匹配背景圖像

我希望我的網站（橫幅）的一部分是適合所有寬度和圖像的圖像以保持全寬（不是px寬度，但是以百分比表示）。我不在乎高度太低，我需要圖像始終顯示所有寬度內容和高度爲自動。CSS：自動計算元素的高度以匹配背景圖像

我使用的是background-size: contain，它保留了圖像的整個寬度，但需要計算高度，因爲那麼容器高度將高於圖像的高度。我試過使用視口單位，但它不同的決議之間不一致（也許我做錯了，但更高分辨率的值不適用於較低的分辨率）。

我該如何做出響應？

的標記：

<body> 
    <section class="feat-bottom"> 
     <h4>some title</h4> 
    </section> 
</body>

我使用CSS的這一形象，因爲我們所有的（應該）知道，設計圖像不標記歸屬。所以圖像必須適合所有的寬度，100％和100vw之間的區別是什麼？第一個是父母的寬度，身體擁有屏幕上的所有寬度，第二個是（再次？）設備的寬度？

此方法是否與平板電腦和手機兼容？我應該使用爲這些情況優化的第二個圖像嗎？

2017-07-27 Chazy Chaz

爲了計算元件的高度我使用其計算的高度，同時保持縱橫比的公式爲：

New height = New width/(Original width/Original height)

所以翻譯到這一點的CSS給出：

section.feat-bottom { 
    height: calc(100vw/(1920px/800px)) 
}

這種方法提供流體擴展，因此不需要任何中斷點。

2017-09-04 11:28:25

回答