如何用css实现元素固定宽高比？

如何用css实现元素固定宽高比？

一、img、video 可替换元素的固定宽高比实现原理

指定img、video的宽度或者高度，另一边设置auto自动计算。比较简单。

html：

<div class="img-wrapper">
	<img src="" alt="">
</div>

css：

.img-wrapper {
  	width: 50%;
}
img {
	width: 100%;
	height: auto;
}

二、普通元素固定宽高比实现原理：

利用padding-top或者padding-bottom的百分比值，实现容器长宽比。在CSS中padding-top或padding-bottom的百分比值是根据容器的width来计算的。如此一来就很好的实现了容器的长宽比。采用这种方法，需要把容器的height设置为0。而容器内容的所有元素都需要采用position:absolute，不然子元素内容都将被padding挤出容器（造成内容溢出）。
比如我们容器的长宽比是16:9，那么根据计算：100% * 9 / 16 可以得到 56.25%。如果你希望的是4:3，那么对应的就是100% * 3 / 4。也可以使用calc函数来实现自动计算：