前言

去年差不多这个时候，发了一篇关于CSS 固定宽高比实现的文章，总结了如何从面试者的角度回答固定宽高比实现的问题。如果你对于历史的 hack 方式不太熟悉，建议先浏览一下原文章。

原文章的最后提到了 aspect-ratio 这种方式。不过当时还没有浏览器实现，现在标准以及实现都有了一些新的进展，这里再次跟大家同步下。

本文会介绍现在的浏览器实现与标准的进展情况、并讲解下具体用法。

浏览器实现及标准现状

2021 年 1 月 19 号，Chrome 发布了 Chrome 88，这一版本的更新中就包含了 aspect-ratio的实现。详情可以参考 Chrome 88 更新内容。

Edge 现在使用的是 Chrome 内核，所以也支持 aspect-ratio。

除此之外，Safari 的技术预览版（下载地址）已经支持 aspect-ratio了，参考Safari 技术预览版 118 版本的发版日志。

Safairi 对 macOS 版本有要求，本着谨慎升级的态度，我没有在该浏览器进行验证。

Firefox 从 81 版本之后也开始逐步支持 aspect-ratio 了。不过需要开启对应的配置才行。地址栏输入about:config，然后搜索 layout.css.aspect-ratio.enabled，将其设为 true 即可。

目前来看，浏览器对于 aspect-ratio 的实现程度还是很向好的。相关的规范也在去年十月更新了一版工作组草案。

所以是时候爬起来再学一学了，希望大家都还能学得动 。下面我们从规范着手来看看具体的用法吧。

aspect-ratio 的具体用法

之前的文章也有提到，类似图片和视频等元素本身就具有一个内在宽高比，与素材的内容本身相关。CSS 的布局算法会在元素尺寸变化的时候尝试维持这一尺寸。

而对于非替换元素，则无法实现类似的效果。aspect-ratio就是为了解决这一场景而提出的，可以给非替换元素指定期望的宽高比，CSS 在进行布局计算的时候，会按照给定的值进行计算。

此外，该属性还可以用来修改可替换元素的固有宽高比。

aspect-ratio 可用于除行内盒子和table表格之外的元素，默认值为 auto，不支持继承，不支持百分比值xx%。

aspect-ratio 支持下面三类值：

auto：默认值，和以前的行为一样；这时候尺寸计算只考虑content-box内容盒子。<ratio>：通过 width / height 的格式指定宽高比，可以指定小数，不能使用百分比值；这时尺寸计算与box-sizing指定的值有关。auto && <ratio>：如果同时指定了 auto 和 <ratio>值，如果应用的元素是可替换元素，则使用auto，如果不是则使用指定的<ratio>。这种情况下，尺寸计算时按照content-box内容盒子计算。

给一个元素指定宽高比值并不意味着会把这个元素变成可替换元素，这个应该很好理解。之所以会这么说，是想说对于一些仅对可替换元素生效的布局规则，并不会因为指定宽高比而对非替换元素生效。如对于非替换元素，justify-self: normal 相当于 stretch，而不是start。

如果元素的宽高都不是auto时，则aspect-ratio 无效，也就是说宽高必须有一个值为 auto。

以上是aspect-ratio的基本用法讲解，下面我们看几个例子。

为了便于展示，除盒子的通用 css 样式如下所示外，其他代码如图中文字所示，不单独贴代码了。

background-color: salmon;margin: 10px auto;display: block;text-align: center;line-height: 2;white-space: pre-line;

可以看出下图的内容区域，即红色区域的比例为 2/1

当然，我们可以通过 box-sizing 来改变这一行为。可以看出整个区域的比例是 2/1

5. 修改可替换元素的宽高比

通过apect-ratio可以修改可替换元素的宽高比，此外如果对于元素同时设置 auto 和 <ratio>，则可替换元素会应用 auto，而非可替换元素则使用指定的比例。如下图所示，上半部分图片的尺寸改成了正方形，下半部分会应用 auto：

6. 默认会基于内容自动计算最小尺寸

为了避免意料之外的溢出情况，如果没有显式地指定 overflow 的值，则当内容溢出时，元素会打破所设置的宽高比，显式地设置 overflow 的值即可，如 overflow: auto; / overflow: hidden;。

如下图中两个块所示，上图是默认包含了溢出内容，下图指定了 overflow: auto;，则会按照预期行为展示。

也可以通过指定min-width/min-height的方式来避免这个问题，这里我就不贴代码和图了，大家可以自己试试。

细心的你可能从这个情况会发现aspect-ratio的优先级比min-width/min-height高，即使指定了 min-width/min-height，布局计算时也会尽可能满足指定的宽高比。

兼容性写法

虽然浏览器已经逐步支持了，但是支持度尚欠缺，如果想尝试使用的话，可以尝试下面的兼容性写法：

.box {  width: 4rem;  aspect-ratio: 1 / 1;} @supports not (aspect-ratio: 1 / 1) {  .box {    height: 4rem;    width: 4rem;  }}

以上就是所有的内容，希望对你有帮助。

喜欢本文章的不妨点个赞~

关注我~持续为您放送精彩~