流体div与背景图像决定的高度

Question

我的背景图片的宽度为100％。 div中没有​​别的东西。我希望div的高度始终是背景图像的宽高比。有没有办法做到这一点？

换句话说，当我缩小页面时，我希望div缩小并保持背景图像的相同高度。

我希望这是有道理的，

感谢

Answer 1

是的，可以使用宽度，填充和背景大小的组合。

Check out this：

  

关键在于填充。填充，无论是用于定义顶部，   底部，左侧或右侧填充，取决于WIDTH的宽度   包含以百分比定义的元素。例如，如果你说   “填充顶部：10％;”你实际上说的是填充   在顶部应该是包含元素的WIDTH的10％。所以   那么，如果你想让一个元素成为响应方，你就是这么简单   写下这个：

width: 20%;
height: 0;
padding-bottom: 20%;
background-size: contain;

Answer 2

如果您使用img标签，则无需关心垂直调整大小。

<div>
   <img src="..." style="width: 100%">
</div>