html - 如何在没有 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，然后添加一个 padding-bottom: X% 其中 X 是图像的纵横比。您可以使用 SASS 获得比率

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

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