标签搜索
隐藏侧边栏

定宽高比终极解决方案-aspect-ratio

搞前端的半夏
2022-05-10 / 0 评论 / 0 点赞 / 41 阅读 / 1,499 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-05-10,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

大家好,我是半夏👴,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注➕ 点赞 👍 加我微信: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>,则首选指定的宽度除以高度的比率,但是当元素本身具有宽高比,则使用本身的宽高比。

定宽高比

 .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

0

评论区