如何让固定3/2比例的子div在动态宽高父div中实现contain效果？

直接给两种实用方案，按需选用：

方案一：现代浏览器首选（用aspect-ratio） #

这种方法代码最简洁，适合支持CSS aspect-ratio 属性的主流浏览器。核心是给子div固定宽高比，再限制它的最大宽高不超出父容器，最后用flex让它居中。

代码示例 #

<div class="parent">
  <div class="child">我是3:2比例的子div</div>
</div>

.parent {
  /* 父容器宽高动态，这里仅为示例，实际可设任意值 */
  width: 70vw;
  height: 50vh;
  border: 1px solid #ddd;
  /* flex布局实现子元素居中，对应contain的留白居中效果 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  /* 固定3:2的宽高比 */
  aspect-ratio: 3/2;
  /* 限制子div最大不超出父容器的宽高 */
  max-width: 100%;
  max-height: 100%;
  /* 让子div占满比例容器空间 */
  width: 100%;
  background: #f5f5f5;
  border: 1px solid blue;
}

方案二：兼容旧浏览器（用padding-top百分比） #

如果要兼容不支持aspect-ratio的旧浏览器（比如IE），可以利用padding-top的百分比特性（百分比基于父元素宽度计算）实现固定比例，配合定位和flex布局完成效果。

代码示例 #

<div class="parent">
  <div class="ratio-wrapper">
    <div class="child">我是3:2比例的子div</div>
  </div>
</div>

.parent {
  width: 70vw;
  height: 50vh;
  border: 1px solid #ddd;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ratio-wrapper {
  position: relative;
  /* 限制比例容器不超出父容器 */
  max-width: 100%;
  max-height: 100%;
  /* 用padding-top实现3:2比例：高度=宽度*(2/3) */
  padding-top: calc(2/3 * 100%);
  /* 容器高度设为0，避免额外高度占位 */
  height: 0;
}

.child {
  /* 绝对定位让子div填满比例容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
  border: 1px solid blue;
}

效果说明 #

两种方案都能实现和object-fit:contain完全一致的效果：

• 当父容器宽高比与子div的3:2匹配时，子div会完全填满父容器
• 当父容器宽高比不同时，子div会按比例缩放至刚好完全容纳在父容器内，父容器剩余空间留白，且子div始终居中显示

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