定宽高比-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会逐渐取代其他方案。
- 点赞
- 收藏
- 关注作者
评论(0)