实现嵌套div居中并保持宽高比的自适应缩放（仿object-fit:contain）

问题需求 #

需要让容器内的div实现类似object-fit:contain的自适应缩放效果，保持指定宽高比，同时容器带有内边距。当前代码在宽高比设为3/1时正常工作，但设置为1/3时失效，后续将通过JavaScript动态修改宽高比，期望效果为：左侧宽高比3/1的元素在容器内居中适配，右侧宽高比1/3的元素同样居中适配，均不超出容器内边距范围。

当前失效代码 #

HTML #

<div class="container">
  <div class="element"></div>
</div>

CSS #

.container {
  display: flex;
  background: yellow;
  width: 320px;
  height: 190px;
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.element {
  background: red;
  aspect-ratio: 1 / 3;
  width: 100%;
  max-height: 100%;
}

问题分析 #

当前代码仅固定了元素的宽度为100%，并限制最大高度为100%。当元素为纵向宽高比（如1/3）时，宽度拉满容器后，计算出的高度会超出容器的可用空间，此时max-height:100%会强制压缩高度，破坏了原本的宽高比，导致效果失效。

解决方案 #

通过绝对定位结合自动外边距的方式，让元素在容器可用空间内自动适配宽高比，同时保持居中，完美模拟object-fit:contain的效果：

修改后代码 #

HTML

<div class="container">
  <div class="element"></div>
</div>

CSS

.container {
  position: relative;
  background: yellow;
  width: 320px;
  height: 190px;
  padding: 16px;
}

.element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  background: red;
  aspect-ratio: 1 / 3; /* 可通过JS动态修改此值 */
  max-width: 100%;
  max-height: 100%;
}

方案说明 #

1. 容器设置position:relative，为内部绝对定位的元素提供定位参考
2. 元素设置position:absolute并将上下左右设为0，结合margin:auto实现水平+垂直居中
3. 通过max-width:100%和max-height:100%限制元素不超出容器的内边距范围
4. aspect-ratio指定元素的宽高比，后续可通过JavaScript直接修改该属性值，动态切换宽高比时仍能保持适配效果

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