“弱声明”

PPK 观察 了 aspect-ratio，一个用于布局的 CSS 属性，它在大多数情况下都能完全按照您的预期执行。随着其在 Firefox 和 Safari 中被标记为实验性特性，它变得越来越有趣，因此我们很快将迎来普遍的 支持。我喜欢他将其称之为“弱声明”，虽然这肯定不是官方术语，但这是一个很好的思考方式。

这将生成一个 16 / 9 元素

.movie-card {
  aspect-ratio: 16 / 9;
}

这也一样

.movie-card {
  width: 50%;
  aspect-ratio: 16 / 9;
}

但这不行

.movie-card {
  width: 150px;
  height: 150px;
  aspect-ratio: 16 / 9;
}

因为您已经明确设置了 height 和 width，这些属性将被尊重。aspect-ratio 是 弱 的，因为它永远不会覆盖以任何其他方式设置的维度。

不仅是 height 和 width，max-height 也可能生效，因此元素有时会遵循纵横比，但始终会尊重 max-* 值，并在必要时破坏纵横比。

它 非常弱，不仅其他 CSS 可以破坏纵横比，元素内部的内容也会破坏它。例如，如果您在一个高度仅由 aspect-ratio 约束的元素中有很多文本，它实际上不会受到约束；内容将扩展元素。

我认为这一切都很好。感觉很直观。感觉就像良好的默认行为，可以防止不必要的副作用。如果您确实需要强制将纵横比应用于带有内容的框，填充技巧 仍然适用于这种情况。这只是一个 更 好的语法，它取代了 执行填充技巧的安全方法。

PPK 的文章 探讨了 flexbox 和 grid 中的 aspect-ratio 行为，其中确实有一些需要注意的地方。例如，如果您正在执行 align-content: stretch; - 这是那些可能破坏纵横比的事情之一。就像他说的：弱声明。