定宽高比-aspect-ratio,yyds!

·  阅读 2376

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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>
复制代码

image-20211105231640452

aspect-ratio

概念

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

兼容性

image-20211105232109893

语法

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的好处是:

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

image-20211105233012129

vw/vh

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

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

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

.child {
    background-color: aquamarine;
    width: 40vw;
    height:30vw
}
复制代码

image-20211105234510636

总结

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改