如何使用 CSS 保持基于高度的 Div 宽高比？

使用 CSS 维护基于高度的 Div 宽高比

在某些情况下，您可能需要确保元素的宽度保持为它的高度，无论高度的变化如何。虽然存在针对此问题的 JavaScript 解决方案，但 CSS 也可以提供一种优雅的方法。

要实现此目的，请利用宽高比属性：

<code class="css">.box {
  height: 50%;
  background-color: #3CF;
  aspect-ratio: 2 / 1;
}</code>

这里是宽高比属性真正的用处闪耀：

• 它在元素的高度和宽度之间建立了固定的关系。
• 因此，无论什么情况，框的长宽比（在本例中为 2:1）都会保持不变。窗口高度发生变化。

此解决方案可确保元素的宽度始终为其高度的 50%，即使窗口垂直调整大小也是如此。

以上是如何使用 CSS 保持基于高度的 Div 宽高比？的详细内容。更多信息请关注PHP中文网其他相关文章！