CSS实现16:9等比例盒子

　　问题：图片的宽度100%，高度要始终自适应为16:9。

　　解决方案：

　　1、通过js程序算出绝对高度再进行设置。这是解决问题最容易想到的方法。

　　2、但是，我们的原则是能用css实现的功能尽量用css，这有利于后期项目的维护。css同样可以实现这个问题，我们可以利用边距的百分比属性定义来优雅实现。

　　我们通过百分比设置宽度，根据宽度的比例数值*9/16，计算出高度的百分比数值，设置内边距为高度的数值，最后用绝对定位把图片百分百填充到我们设置的区域里面。

　　那么外面盒子宽度100%，高度0，但是因为有padding-bottom为9/16的比例，所以外层盒子始终是16:9等比例，再绝对定位设置图片宽高都100%即可。

<div class="scale">
    <img src="" class="item"/>
</div>

　　css代码：

.scale {
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  position: relative;
}

.item {
  width: 100%;
  height: 100%;
  background-color: aquamarine;
  position: absolute;
}

　　这样即可，比较简单，就是思维上的灵活运用。

转载于:https://www.cnblogs.com/goloving/p/10745921.html