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

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

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

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

html：

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函数来实现自动计算：calc(100%*9/16)。
不过这种方式不灵活，只能够高度随着宽度变。CSS 工作组现在正在引入一种新的方案aspect-ratio，可以很方便地指定宽高比，不过暂时还没有浏览器实现。相信不久之后就会有浏览器逐渐实现了。

html：

	

		
这是一个16：9的矩形
	

CSS：

* {
       margin: 0;
       padding: 0;
       /* 清除默认样式 */
   }
   .box {
       width: 50%;
       /* 这里的宽度，根据你想要实现的容器相比浏览器可视窗口的宽度比来 */
   }
   .scale {
       width: 100%;
       padding-bottom: 56.25%;
       height: 0;
       position: relative;
   }
   .item {
       width: 100%;
       height: 100%;
       background-color: pink;
       position: absolute;
   }

三、如果想要实现固定比例的img，但是img本身尺寸并不是我们想要的比例，那么可以通过设置background属性来填充盒子。

但是这种方式下，图片想要不变形，需要设置cover属性哦，但是这样同时有个缺陷，就是，图片不能显示完整。background: url() no-repeat center center/cover;

html：

css：

* {
      margin: 0;
       padding: 0;
       /* 清除默认样式 */
   }
   .box {
       width: 50%;
       /* 这里的宽度，根据你想要实现的容器相比浏览器可视窗口的宽度比来 */
   }
   .img-wrapper {
       width: 100%;
       background: url() no-repeat center center/cover;
       padding-bottom: 56.25%;
       height: 0;
   }
   img {
       width: 100%;
       height: auto;
   }