保持视口宽度和高度的纵横比的流体 div 元素

Question

我正在尝试为图像创建一个 div 容器，该容器在页面（flexbox）上水平和垂直居中，宽高比为 2:3。我希望它能够根据浏览器的宽度和高度进行流畅缩放，同时仍保持 2:3 的纵横比。

我通过将其宽度设置为其父容器的 40% 并将纵横比属性设置为 2:3，使其水平缩放。但我也希望当浏览器/视口高度很窄时它可以垂直缩放。如果我将元素的高度设置为缩放百分比，则纵横比将被绕过，并且其形状会发生变化。如果我保持原样，它会随着视口宽度水平缩放，但它的高度被锁定，并在视口高度缩小时被切断。我知道这是大多数网页的预期行为，但我正在尝试创建一个始终以正确的纵横比居中的小插图，无论视口宽度或高度如何。有人可以建议吗？很抱歉我没有包含标记，我是一名使用 webflow 创建此网站的设计师。

谢谢你

Answer 1

.box {
  aspect-ratio: 3 / 2;
  max-height: 100vh;
  margin: auto;
  /* Everything below is for demonstration purposes only. */
  background-image: linear-gradient(45deg, #ff0, #f0f);
}

<div class="box"></div>

要检查此解决方案 - 单击右侧的“整页”并调整浏览器窗口的大小