CSS 保持宽高比但从不溢出视口的响应框

Question

我找到的每个示例，包括据称正确的答案：

保持 div 与 CSS 的纵横比 - Maintain the aspect ratio of a div with CSS

问题总是在某些时候，框剪辑（溢出）通常在垂直轴上。

我正在尝试创建一个响应式框，它在两个方向上都保持纵横比并且从不在任何一个方向上剪辑（溢出）（即：纵横比框从不大于视口的 90%）。我试过同时使用高度和宽度作为计算的基础，但两者都不起作用，而且高度似乎更符合我的目的（图像的高度永远不会改变，但宽度将取决于图像的纵横比。

是否可以有一个框保持其纵横比并且永远不会溢出视口？

.demoWrapper {
  padding: 1vh;
  background: white;
  box-sizing: border-box;
  resize: both;
  border: 1px dashed;
  overflow: auto;
  max-width: 100%;
  height: 80vh;
}

div {
  width: 50%;

  padding-bottom: 35%;
  background: gold; /** <-- For the demo **/
}

<div class="demoWrapper">
  <div></div>
</div>

Answer 1

为了确保框保持其纵横比但不溢出视口（已指定宽度不超过 90vw，高度不超过 90vh）CSS 可以计算出最合适的：

.box {
  display: inline-block;
  --ratio: calc( 3 / 2);
  /* put the aspect ratio width to height you want */
  --h: min(calc(90vw / var(--ratio)), 90vh);
  height: var(--h);
  width: calc(var(--h) * var(--ratio));
  background-color: red;
}

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

这假设框的纵横比已知。

如果不是，可以在第一次加载和设置 CSS 变量时计算，但这需要 Javascript。从问题中不清楚宽高比是否已知。

如果宽高比是由图片设置的，那么可能还有其他方法。

CSS 保持宽高比但从不溢出视口的响应框

CSS responsive box that maintains aspect ratio but NEVER overflows the viewport

css

image

aspect-ratio

responsive-design