背景:在我们开发的过程中,我们很经常有碰到这样的需求,要让某个dom元素随着窗口宽度/高度的变化自适应改变其宽度 / 高度,并且始终保持一个固定的宽高比。
我们先看看最终的方案:padding-bottom实现普通元素固定宽高比。
首先,我们先明确两个结论:
1.绝对定位元素的大小是由top、right、 bottom、 left四个属性决定的,这四个属性是相对于绝对定位元素的包含块来定位的。
2.垂直方向上的内外边距使用百分比做单位时,是基于包含块的宽度来计算的。
下面我们通过借助padding-bottom来实现一个宽高比例固定的元素:
<div class="video-wrapper">
<div class="video"></div>
</div>