CSS实现div内图片居中缩放（保留原比例）技术咨询

需求说明：

• 外层div .container-outer-01 固定铺满整个视口
• 内层div .container-inner-01 尺寸需与内部图片完全一致
• 整体实现类似 object-fit: contain 的效果：保持图片原始宽高比，尽可能放大且不超出视口
• HTML结构无法修改（不能移除或调整内层div和img标签）

原有代码 #

CSS

.container-outer-01 {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-inner-01 {
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  border-radius: 20px;
  outline: dashed red;
}

.container-inner-01 img {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

HTML

<div class="container-outer-01">
  <div class="container-inner-01">
    <img src="https://placehold.co/600x400">
  </div>
</div>

修正后的实现方案 #

原有代码中图片设置 height:100% 会强制拉伸图片、破坏比例，且内层div无法自适应图片尺寸。调整后的CSS如下：

.container-outer-01 {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container-inner-01 {
  max-width: 100%;
  max-height: 100%;
  border-radius: 20px;
  outline: dashed red;
}

.container-inner-01 img {
  display: block; /* 移除图片默认行内间距 */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

实现原理 #

1. 外层flex布局保持不变，负责将内层容器居中显示在视口内
2. 内层div仅通过 max-width 和 max-height 限制最大尺寸，由内部图片自然撑开，保证容器尺寸与图片完全一致
3. 图片设置 width: auto 和 height: auto 保留原始宽高比，max-width 和 max-height 确保图片不会超出内层容器（即视口限制），从而实现类似 object-fit: contain 的缩放效果

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