max-height 或 max-width 单独使用无效，必须搭配 height: auto 或 width: auto 才能实现等比缩放；否则图片不缩放、拉伸或裁剪，因浏览器默认按原始尺寸渲染，max-* 本身不触发缩放逻辑。
只设 max-height 或 max-width 不生效，必须配 height: auto 或 width: auto，否则图片要么不缩放、要么被拉伸裁剪。
为什么 max-height 单独写没用
浏览器默认按图片原始尺寸渲染，max-height 本身不触发缩放逻辑。常见现象包括：
- 图片完全不缩小，撑破容器或导致横向滚动条
- 加上
height: 300px后高度被强制固定，宽高比崩坏 - 在 Flex 容器里图片被截断，且控制台无任何报错提示
max-height 和 height: auto 必须成对出现
这是实现等比缩放的最小必要组合。实际使用时还要看父容器是否可变宽：
- 父容器宽度不确定（如文章正文）：推荐
img { max-height: 400px; height: auto; width: auto; } - 父容器已有
max-width（如卡片、模态框）：优先用max-width: 100%; height: auto;，max-height仅作兜底 - 内联写法易出错，建议统一走 CSS 类，避免重复声明和覆盖混乱
同时限制最大宽高时的取舍逻辑
当明确要求「不能超过 400px 高、也不能超过 600px 宽」，直接写：
img {
max-width: 600px;
max-height: 400px;
height: auto;
width: auto;
}
注意：此时生效的是更“紧”的那个限制——比如一张 1200×800 的图，max-width: 600px 会先把它缩到 600×400，max-height: 400px 就不再起作用；反之，一张 300×900 的图则由 max-height 主导缩放。
容易被忽略的兼容性细节
max-height + height: auto 在所有现代浏览器中表现一致，但以下两点常被漏掉：
- 如果图片是
<picture></picture>或<source></source>的子元素，需确保样式也命中内部<img>，而非仅作用于<picture></picture> - 在某些旧版 Safari 中，
width: auto对 SVG 图片支持不稳定，可加vertical-align: middle防止基线偏移
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
