如何在没有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是图像的纵横比。您可以使用

获得SASS的比率

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

此外，这可以与背景图像结合使用并使用background-size：cover;使图像响应。