如何在沒有JavaScript的情況下保持元素比例

Question

我試圖將我的HTML頁面上的一些項目的尺寸調整爲窗口大小。我知道它可以像很容易使用jQuery來完成：

$(window).resize(function(){ 
    var width = $(this).width(); 
    $(item).css('height',(height * w/h)+ 'px'); // w and h are variables used to calculate the ratio 
}); 

但是我正在尋找一種方式用CSS來做到這一點。 我有一個居中的項目佔據了窗口寬度的40％。因此，當窗口的寬度減小時，物品的寬度也會減小，但高度相同。所以我想要的是比例是相同的。

Answer 1

您可以將高度設置爲0，然後添加填充底部：X％，其中X是圖像的寬高比。你可以通過使用

.element{ padding-bottom: percentage(height/width); } 

可以得到與SASS的比率。使圖像響應。