保持纵横比但从不溢出视口的 CSS 响应框 [重复]答案

【问题标题】：CSS responsive box that maintains aspect ratio but NEVER overflows the viewport [duplicate]保持纵横比但从不溢出视口的 CSS 响应框 [重复]
【发布时间】：2021-11-12 12:59:00
【问题描述】：

我发现的每个例子，包括所谓的正确答案：

使用 CSS 保持 div 的纵横比 - 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>

【问题讨论】：

好的，让我们再次确认一下。盒子必须有一些预定义的纵横比，宽度不得超过 90vw，高度不得超过 90vh，但在这些限制范围内，盒子必须尽可能大。对吗？
是的...该框将包含一个图像，我不希望图像溢出可用的视口
对象匹配包含有用吗？

标签： css image responsive-design aspect-ratio

【解决方案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;
}

&lt;div class="box"&gt;&lt;/div&gt;

这假设盒子的纵横比是已知的。

如果不是，它可以在首次加载和 CSS 变量集时计算，但这需要 Javascript。从长宽比是否已知的问题中不清楚。

如果通过图片设置纵横比，那么可能还有其他方式。

【讨论】：

我明天回到我的电脑前会试试这个。谢谢 - CES