如何用CSS实现保持宽高比且永不溢出视口的响应式盒子

问题描述 #

现有通用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; /** <-- 演示用样式 **/
}

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

实现方案 #

可以实现该效果，优先推荐使用CSS原生aspect-ratio属性配合尺寸限制实现，兼容性覆盖目前95%以上的用户设备：

.ratio-box {
  /* 设置需要的固定宽高比，此处示例和原代码35%padding-bottom效果一致 */
  aspect-ratio: 100 / 35;
  /* 限制最大尺寸不超过视口的90% */
  max-width: 90vw;
  max-height: 90vh;
  /* 自适应宽度，优先占满可用空间 */
  width: 100%;
  background: gold;
}

如果需要兼容不支持aspect-ratio的旧版浏览器，可以使用vmin单位配合padding方案实现：

.ratio-box {
  /* 取视口宽高较小值的90%作为基准，保证不会溢出任意方向 */
  width: 90vmin;
  padding-bottom: calc(90vmin * 0.35);
  position: relative;
  background: gold;
}
/* 内部内容绝对定位填充盒子 */
.ratio-box > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

两种方案都能保证盒子始终保持固定宽高比，不会超出视口90%的范围，无裁切溢出问题。

内容的提问来源于stack exchange，提问作者CES