为 CSS 设计长宽比单位

Desknumber

CSS 工作组为 CSS 设计了一个长宽比单位。虽然这还没有在浏览器中实现，但本文将介绍设计新的调整方法的过程并解释其工作原理。
CSS 中反复出现的问题之一是，无法根据事物的长宽比来调整其大小。特别是在使用响应式设计时，您通常希望能够将宽度设置为百分比，并使高度对应于某些纵横比。这是负责设计 CSS 的人员（即 CSS 工作组）最近一直在讨论的问题，并且最近在旧金山举行的 CSSWG 会议上商定了一项拟议的解决方案。

这是一个新的解决方案，所以我们还没有浏览器实现，但我认为值 电子邮件营销列表 得写下该提案，以防更广泛的网络社区中的任何人都可以看到它的令人震惊的问题。它还可以让您深入了解 CSSWG 的工作以及如何讨论此类问题以及如何设计新功能。



我们要解决的问题是什么？ 该问题与非替换元素有关，这些元素没有固有的长宽比。替换元素是与元素一起放置的图像或视频之类的内容<video>。它们与 CSS 中的其他框不同，因为它们具有设定的尺寸和自己的行为。这些被替换的元素据说具有固有的纵横比，因为它们具有尺寸。

可能包含您的内容的 div 或其他 HTML 元素没有宽高比，您必须为其指定宽度和高度。没有办法说你想要保持 16 / 9 的宽高比，并且无论宽度是多少，都应该使用给定的宽高比计算出高度。