求助：如何让图片在宽高上下限内保持宽高比？

看起来你遇到的核心问题是flex容器的尺寸约束没有正确作用到图片上，导致max-height失效或者图片比例失控。咱们来一步步解决这个问题：

正确的CSS方案 #

首先，我们需要调整容器和图片的CSS属性，确保容器先满足min/max尺寸约束，同时让图片在容器内自动保持宽高比：

.box {
  min-width: 128px;
  min-height: 128px;
  max-width: 100%;
  max-height: 256px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: cyan; /* 将背景色移到容器，因为图片按比例缩放时的空白区域由容器填充 */
}

.inner {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

对应的HTML保持不变：

<div class="box">
  <img class="inner" src="https://i.imgur.com/3t7YAt8.png"/>
</div>

为什么之前的方案失效？ #

第一种方案的问题 #

你给.inner设置了width: 100%; height: 100%;，这会强制图片撑满flex容器的尺寸。但flex容器的height: auto意味着它的高度由内容决定，而图片的height: 100%又依赖容器高度，形成了循环依赖——最终容器会被图片的原始高度撑开，完全忽略max-height约束。

第二种方案的问题 #

当你把.inner改成max-width: 100%; max-height: 100%;时，虽然图片会保持比例，但flex容器在没有明确对齐方式的情况下，不会自动填充min-width/min-height的空白区域。如果图片本身尺寸小于128x128，容器会收缩到图片的实际尺寸，违背了你设置最小尺寸的需求。

方案的优势 #

• 容器通过flex的align-items: center和justify-content: center实现图片居中，同时确保容器始终满足min-width/min-height的要求；
• 图片的max-width/max-height: 100%保证它不会超出容器的最大尺寸限制，width/height: auto则强制保持原始宽高比；
• 背景色放在容器上，能在图片尺寸小于容器最小尺寸时，显示你想要的cyan背景。

这个方案不管原图是正方形、长方形还是其他形状，都能完美适配你设定的尺寸范围。

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