大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：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会逐渐取代其他方案。
