html - 高度由背景图像决定的流体 div

Question

我在 100% 宽度的 div 中有一个背景图像。 div 中没有其他内容。我希望能够让 div 的高度始终是背景图像的纵横比。有没有办法做到这一点？

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

我希望这是有道理的，

谢谢

Answer 1

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

Check out this :

The key lies in padding. Padding, whether being used to define top, bottom, left, or right padding, is dependent upon the WIDTH of the containing element when defined in percents. For example, if you say “padding-top: 10%;” what you are actually saying is that the padding on the top should be 10% of the WIDTH of the containing element. So then, if you wish to make an element a responsive square, you simply write this:

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