第一次看`

CSS迎来了一个影响盒子大小的新属性——aspect-ratio！这可是个大事件。虽然已经有很多方法可以创建指定宽高比的盒子（我认为基于自定义属性的解决方案是最好的），但没有一种方法特别直观，也肯定不如声明单个属性那样简单。

随着aspect-ratio属性（MDN，不要与媒体查询版本混淆）即将到来，我想研究一下它的工作原理，并尝试理解它。

感谢Una让我首先看到了这个属性，它确实引起了很多人的兴趣。以下是我的一些尝试。

单独在元素上使用aspect-ratio将根据自动宽度计算高度。

不设置宽度，元素仍然具有自然的自动宽度。因此，高度可以根据宽高比和渲染宽度计算得出。

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

如果内容超出宽高比，元素仍会扩展。

在这种情况下，宽高比将被忽略，这实际上很好。这就是为什么伪元素策略对于宽高比很流行的原因，因为它在内容过多时不会导致危险的数据丢失或尴尬的重叠。

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

如果元素具有高度或宽度中的一个，则根据宽高比计算另一个。

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

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

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

考虑min-*和max-*

宽度、最小宽度和最大宽度（或高度版本）之间总是存在一些张力。其中一个总是“获胜”。通常这很直观。

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

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

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

  /* 被忽略，因为宽度计算为 125px */
  /* min-width: 100px; */

  /* 获胜，使宽高比为 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，然后应用了 300px 的min-width？min-width获胜。它仍然很直观，但由于涉及许多属性、函数和值，因此会让人感到困惑。

也许将aspect-ratio视为确定元素大小的最弱方法会有所帮助？

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

以上是第一次看`的详细内容。更多信息请关注PHP中文网其他相关文章！