初识 `aspect-ratio`

哦，嘿！一个影响盒子大小的新属性！这是一件大事。 已经有很多方法 可以创建纵横比大小的盒子（我认为 这个基于自定义属性的解决方案 是最好的），但没有一个特别直观，当然也没有像声明单个属性那样简单。

因此，随着 aspect-ratio 的即将到来（MDN，不要与 媒体查询版本 混淆），我认为我会看看它是如何工作的，并尝试理解它。

感谢 Una，我第一次在这里看到它，哇，它确实引起了人们的兴趣。这是我的一些尝试。

仅在元素上使用 aspect-ratio 将根据 auto 宽度计算高度。

在没有设置宽度的情况下，元素仍然会有一个自然的自动 width。因此，高度可以根据纵横比和渲染宽度计算得出。

.el {
  aspect-ratio: 16 / 9;
}

如果内容超出纵横比，元素将继续扩展。

在这种情况下，纵横比将被忽略，这实际上很好。这就是为什么 伪元素策略 对于纵横比很受欢迎，因为它在内容过多时不会让我们陷入危险的数据丢失或尴尬的重叠区域。

但是，如果您 *想要* 将高度限制在纵横比内，则可以通过添加 min-height: 0; 来实现。

如果元素具有 *任何一个* 高度或宽度，则 *另一个* 将根据纵横比计算得出。

因此，aspect-ratio 基本上是在您只有一个维度时设置另一个维度的方法。

如果元素同时具有高度和宽度，则 aspect-ratio 将被忽略。

显式的高度和宽度的组合比纵横比“更强大”。

考虑 min-* 和 max-*

width、min-width 和 max-width（或高度版本）之间总是存在一些张力。其中一个总是“获胜”。通常非常直观。

如果您设置 width: 100px; 和 min-width: 200px;，则 min-width 将获胜。因此，min-width 要么被忽略（因为您已经超过了它），要么获胜。max-width 也是如此：如果您设置 width: 100px; 和 max-width: 50px;，则 max-width 将获胜。因此，max-width 要么被忽略（因为您已经低于它），要么获胜。

看起来这种普遍的直观性在这里也适用：min-* 和 max-* 属性要么获胜，要么无关紧要。**如果它们获胜，则会破坏 aspect-ratio。**

.el {
  aspect-ratio: 1 / 4;
  height: 500px;

  /* Ignored, because width is calculated to be 125px */
  /* min-width: 100px; */

  /* Wins, making the aspect ratio 1 / 2 */
  /* min-width: 250px; */
}

使用值函数

纵横比在流体环境中或任何您基本上事先不知道其中一个维度的情况下总是最有用。但即使您不知道，您也经常会对事物施加约束。例如，50% 的宽度是可以的，但您只想让它缩小到 200px。您可以使用 width: max(50%, 200px);。或者使用 clamp(200px, 50%, 400px); 在两侧进行约束。

这似乎可以直观地工作。

.el {
  aspect-ratio: 4 / 3;
  width: clamp(200px, 50%, 400px);
}

但是，假设您遇到了最小的 200px，然后应用了 min-width 为 300px？min-width 将获胜。它仍然很直观，但由于涉及到许多属性、函数和值，因此会让人感到困惑。

也许将 aspect-ratio 视为调整元素大小的 *最弱* 方法会更有帮助？

它永远不会战胜任何其他大小信息，但如果该维度没有其他可用信息，它将始终执行其大小调整。