定宽高比-aspect-ratio，yyds!

大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

首先定宽高比，在网页中开发中时很常见的，而且面试也偶有出现。看到这个题目，自己第一反应没准就是，这不是很简单吗？直接将宽度设置为和宽度同样的px不就可以了。但是宽度不定呢？通常我们的做法是啥？我之前使用的padding-bottom来实现的。当然使用js获取元素的宽度，然后设置高度，也是一种比较简单的方案。不过，今天的CSS提供了更加方便的解决方案：aspect-ratio。aspect-ratio翻译为中文就是纵横比的意思。

padding-top/bottom

使用padding-top/bottom的原理是：垂直方向上的margin和padding,使用百分比做单位时，是根据父元素的宽度作为标准的来进行计算的。

定宽高比

这里在外层的div设置宽度，然后内层的div宽度设置为100%，且必须设置为100%，然后就是将内层元素的高度设置为0，且padding-top,设置为75%。

常见的比例换算如下

1 / 1 = 1 = padding-top: 100%
3 / 4 = 0.75 = padding-top: 75%
2 / 3 = 0.66666 = padding-top: 66.67%
9 / 16 = 0.5625 = padding-top: 56.25%

 .parent{
     width: 500px;
     height: 500px;
     background-color: aquamarine;
}
.child{
    background-color: rgb(127, 223, 247);
    width:100%;
    height: 0;
    padding: 0;
    padding-top:75%;
}
<div class="parent">
    <div class="child">
    </div>
</div>

aspect-ratio

概念

aspect-ratio 允许创建保持纵横比的容器。

兼容性

语法

aspect-ratio: auto || <ratio>;

auto是默认值
<ratio>写法为<width / height>

当然也可以同时设置这两个值：

div {
  aspect-ratio: auto 1 / 1;
}

如果同时指定auto 和 <ratio>，则首选指定的宽度除以高度的比率，但是当元素本身具有宽高比，则使用本身的宽高比。

常用换算

1:1 aspect ratio = 1 / 1 = 1 = `padding-top: 100%`
4:3 aspect ratio = 3 / 4 = 0.75 = `padding-top: 75%`
3:2 aspect ratio = 2 / 3 = 0.66666 = `padding-top: 66.67%`
16:9 aspect ratio = 9 / 16 = 0.5625 = `padding-top: 56.25%`

定宽高比

.child {
     width: 500px;
     background-color: rgb(127, 223, 247);
     height: auto;
     aspect-ratio: 4/3;
}
<div class="child"></div>

使用aspect-ratio的好处是：

不需要在套一层div,只需要指定高度/宽度的值就可以。
可以指定高度具体的值，而使用padding-top/bottom咋无法指定高度的值。
你也可以不指定宽和高的值，此时是按照宽度来保持宽高比。

vw/vh

因为vw和vh表示的视窗的占比。

如果将宽高设置为相同的数值，那么也是可以保证相同的宽高比。

这样做的好处就是在不同尺寸的屏幕下，永远保持宽高比。但是同一个尺寸下。对于宽高来说，本质上其实是定值。

.child {
    background-color: aquamarine;
    width: 40vw;
    height:30vw
}

总结

其实实现定宽高比的方案有很多，本文简单的介绍了三种，当然aspect-ratio应该是当之无愧的神，而且最简单的，适用场景最多的。随着兼容性好起来，aspect-ratio会逐渐取代其他方案。