前言
去年差不多这个时候,发了一篇关于CSS 固定宽高比实现的文章,总结了如何从面试者的角度回答固定宽高比实现的问题。如果你对于历史的 hack 方式不太熟悉,建议先浏览一下原文章。
原文章的最后提到了 aspect-ratio
这种方式。不过当时还没有浏览器实现,现在标准以及实现都有了一些新的进展,这里再次跟大家同步下。
本文会介绍现在的浏览器实现与标准的进展情况、并讲解下具体用法。
浏览器实现及标准现状
2021 年 1 月 19 号,Chrome 发布了 Chrome 88,这一版本的更新中就包含了 aspect-ratio
的实现。详情可以参考 Chrome 88 更新内容。
Edge 现在使用的是 Chrome 内核,所以也支持 aspect-ratio
。
除此之外,Safari 的技术预览版(下载地址)已经支持 aspect-ratio
了,参考