为 CSS 设计一个纵横比单位

Rachel Andrew 表示，CSS 工作组在最近的一次会议上 设计了一个纵横比单位。其理念是在我们需要元素高度根据元素宽度计算（反之亦然）时找到一个优雅的解决方案。

例如，假设我们有一个网格布局，其中一行元素应保持正方形（1:1）比例。我们可以使用一些现有方法，但这些方法并不理想

• 定义一个明确的尺寸。 如果我们定义网格中项目的的高度，但在模板列上使用内在值（例如，auto-fill），那么我们就不再知道元素的宽度，因为容器会响应浏览器视窗。元素将增长和压缩，但永远不会保持完美的正方形。
• 定义明确的尺寸。 当然，我们可以将元素的宽度和高度都设置为 200px，但如果一个项目的内容比其空间还多，会发生什么？现在我们遇到了溢出问题。
• 使用填充技巧。 元素的块级（从上到下）填充百分比是根据元素的内联宽度计算的，我们可以用它来计算高度。但正如 Rachel 所言，这很不直观，也很难维护。

Chris 详细介绍了 保持纵横比的可能方法，但没有一种方法像 CSS 工作组提出的解决方案那样优雅。

.box {
  width: 400px;
  height: auto;
  aspect-ratio: 1/1;
}

看到那个 aspect-ratio 属性了吗？带纵横比单位的 aspect-ratio 属性将根据 width 属性的值来计算元素的高度。

或者，在列设置为 auto-fill 的网格布局中

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.item {
  aspect-ratio: 1/1;
}

太酷了！但这项提案接下来会怎样？aspect-ratio 已包含在 CSS Sizing 4 规范 的草案中。如果您有任何想法或建议，请在 CSSWG 的 GitHub 库 中创建问题。或者，正如 Rachel 所建议的那样，在她的 Smashing Magazine 文章中发表评论，甚至可以撰写自己的文章并将其发送过来。这是一个为可能的新功能发声的好机会。

直接链接 →