如何使图片在Flexbox中保持宽高比适配？代码疑问

你的问题核心在于**object-fit需要图片本身有明确的尺寸约束，才能按照容器空间进行缩放适配**。当前代码里的.box虽然通过flex:1占据了容器的剩余空间，但图片并没有被限制在.box的尺寸范围内，所以object-fit:contain无法发挥作用。

修改方案一：让图片填满容器空间 #

给图片添加width: 100%; height: 100%;，让它填满.box的可用空间，此时object-fit:contain就能基于这个固定尺寸进行宽高比适配了。

修改后的完整代码：

* { box-sizing: border-box; margin: 0; }
.container { 
  display: flex; 
  flex-direction: column; 
  align-items: stretch; 
  width: 400px; 
  height: 200px; 
  padding: 10px; 
  background: red; 
}
.box { flex: 1; }
.box img { 
  width: 100%; 
  height: 100%; 
  object-fit: contain; 
}

<div class="container">
  <h1>lorem ipsum</h1>
  <figure class="box">
    <img src="http://lorempixel.com/400/200/">
  </figure>
</div>

修改方案二：通过Flex布局居中适配 #

如果希望图片在.box内居中显示，也可以给.box添加Flex布局，用max-width和max-height限制图片的最大尺寸，同样能实现宽高比保持的效果：

* { box-sizing: border-box; margin: 0; }
.container { 
  display: flex; 
  flex-direction: column; 
  align-items: stretch; 
  width: 400px; 
  height: 200px; 
  padding: 10px; 
  background: red; 
}
.box { 
  flex: 1; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}
.box img { 
  max-width: 100%; 
  max-height: 100%; 
  object-fit: contain; 
}

原理说明 #

• 方案一中，width:100%; height:100%;给图片明确了填充目标，object-fit:contain会在这个范围内保持图片原始宽高比，确保完整显示不裁剪。
• 方案二中，Flex布局让图片在.box内居中，max-width和max-height确保图片不会超出容器边界，object-fit:contain则负责维持宽高比。

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