元素固定宽高比这么写太香了 - Chrome 支持 aspect-ratio 了

前言

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

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

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

浏览器实现及标准现状

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

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

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