Html 如何在没有JavaScript的情况下保持元素比率

我正在尝试调整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%。因此，当窗口的宽度减小时，项目的宽度也减小，但高度相同。因此，我只希望比率相同。

您可以将高度设置为0，然后添加一个填充底部：X%，其中X是图像的纵横比。您可以使用SASS获得比率

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

此外，这可以与背景图像结合使用，并使用背景大小：封面；要使图像具有响应性。

可能的重复：