浅析CSS实现16:9等比例盒子的解决方案及aspect-ratio介绍及其应用
一、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;
}
这样即可，比较简单，就是思维上的灵活运用。
二、aspect-ratio 属性解决方案
Img元素，但是除了img、vidoe这种可替换元素元素具有长宽比的特性，那么其它元素如果保持长宽比呢，这给我们的开发带来了许多不便利，今天就教大家使用aspect-ratio属性解决实际问题1、Padding-Top Hack
不知道你有没有遇到过这么一道经典面试题（请你写一个保持长宽纵横比的DIV元素）就得用Padding-Top Hack解法。
什么是Padding-Top Hack，不知道你是否遇到过这种需求，需要一个非可替代元素始终保持它的长宽比？，如何做的？Padding-Top Hack就是最常见的解决方案。
利用padding来保持元素的长宽比，就是我们第一节介绍的内容
2、什么是aspect-ratio
aspect-ratio是一个很早就在W3C提出的保持元素纵横比的规范，但是早期各大浏览器都支持的不好，而现在各大主流浏览器都已经很好的支持了这个css原生属性，它出现的目的就是为了解决我们保持元素纵横比遇到的各种麻烦的事
3、如何使用aspect-ratio
就拿我们刚才上面使用Padding-Top Hack的例子来试试吧，来看看它究竟有多好用：只需要添加这一行代码
.inner {
background-color: pink;
color: red;
font-size: 30px;
width: 50%;
text-align: center;
aspect-ratio: auto 2 / 1; //就添加这一行
}
4、aspect-ratio详细解析
auto： 默认值，它指定元素没有首选的纵横比，应该像往常一样调整自己的大小。因此，替换元素，如具有固有纵横比的图像，使用 该 纵横比。<ratio>: 由正斜杠 (/)分隔的两个正数值，它们周围有或没有空格，目标是元素的宽度和高度。在单个值的情况下，第二个值被认为是 1。涉及首选纵横比的大小计算适用于指定的框的尺寸box-sizing。initial： 应用属性的默认设置，即auto。inherit： 采用aspect-ratio父级的值。unset： 从元素中删除当前的纵横比
auto属性适用于可替换元素（img、video这种本身就具有长宽比的元素）使用了auto属性，那么可替换元素将继续保持它原本的长宽比，不会受你css属性的影响。关于aspect-ratio的使用，具体需要时可查文档