时间戳

首页 > 解决方案 > 保持纵横比但从不溢出视口的 CSS 响应框

css - 保持纵横比但从不溢出视口的 CSS 响应框

问题描述

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

用 CSS 保持div 的纵横比 - 用 CSS 保持 div 的纵横比

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

我正在尝试创建一个响应框，以保持两个方向的纵横比，并且从不剪辑（溢出）在任一方向（即：纵横比框永远不会大于视口的 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>

标签： cssimageresponsive-designaspect-ratio

解决方案

为了确保盒子保持其纵横比但不会溢出视口（已指定宽度不超过 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。从长宽比是否已知的问题中不清楚。

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

推荐阅读