如何实现图片自适应容器尺寸并保持宽高比，不超出容器限制？

你遇到的问题是竖版图片在限制了max-height的容器中，无法同时兼顾不超出容器宽高且保持自身比例。之前尝试的几种单独设置宽高的方式都有缺陷：

• 设置width: 100%; height: auto：图片宽度铺满容器，但竖版图片的高度会超过容器的max-height
• 设置height: 100%; width: auto：图片高度贴合容器，但宽度可能超出容器范围
• 设置width: 100%; max-height: 50px：图片会被强制拉伸/压缩，破坏原始宽高比

正确解决方案 #

给图片同时设置max-width: 100%和max-height: 100%，并保留width: auto和height: auto，让浏览器自动计算最优尺寸，既不超出容器的宽高限制，也能维持图片的原始比例。

如果容器不需要占满父级宽度，建议添加width: fit-content（或display: inline-block），避免容器默认全屏宽度导致图片被过度拉伸。

修正后的代码示例 #

CSS

.container {
  max-height: 50px;
  border: 2px solid red;
  width: fit-content; /* 让容器宽度适配图片，可选 */
}

img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

HTML

<div class="container">
  <img src="https://placehold.co/40x60.jpg" width="40" height="60"/>
</div>

原理说明 #

• max-width: 100%：限制图片最大宽度不超过容器宽度
• max-height: 100%：限制图片最大高度不超过容器的max-height
• width: auto和height: auto：让浏览器根据图片原始宽高比，自动选择以宽度或高度为基准进行缩放，确保图片始终在容器范围内且比例不变

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