max-height 单独作用于 img 无效，必须配合 height: auto 和 width: auto 才能实现等比缩放；否则图片不缩、压扁或被截断，因浏览器默认按原始尺寸渲染且 max-height 不触发缩放逻辑。
max-height 单独用在 <img> 上基本无效，必须搭配 height: auto 和 width: auto 才能触发等比缩放；否则图片要么不缩小，要么被裁剪或压扁。
为什么只写 max-height 没效果？
浏览器默认按原始尺寸渲染图片，max-height 本身不触发缩放逻辑。常见现象包括：
- 图片完全不缩小，撑破容器或导致横向滚动条
- 加上
height: 400px后被强制压扁（比例崩坏） - 在
display: flex或display: grid容器中被无声截断，控制台无报错 - 父容器未设宽度上下文（如
position: absolute或未约束的 flex item），max-height失去参照基准
max-height 必须和哪些 CSS 属性一起用？
最小必要组合是：max-height + height: auto + width: auto。原因如下：
-
height: auto是等比缩放的核心——它让浏览器根据原始宽高比反推高度 -
width: auto防止父容器有width: 100%时意外锁定宽度，干扰缩放优先级 - 推荐写法：
img { max-height: 400px; height: auto; width: auto; } - 如果父容器已设
max-width: 100%，可省略width: auto，但height: auto仍不可少
同时限制最大宽高时缩放逻辑是什么？
浏览器会自动按「更紧约束」优先缩放，过程无需 JS 干预。例如：
立即学习“前端免费学习笔记（深入）”；
- 原图 2000×1000，设
max-width: 600px和max-height: 400px - 先按高度缩：400px 高 → 宽度变为 800px → 超出
max-width - 再按宽度缩：600px 宽 → 高度变为 300px
- 最终尺寸为 600×300，保持原始比例
- 别写
width: 100%; height: 100%，那会丢掉比例保护，填满即变形
移动端和高清屏下容易忽略的细节
max-height: 400px 在 Retina 屏上物理高度偏小，视觉占比缩水。建议：
- 关键 Banner 图改用
max-height: 50vh，随视口动态调整 - 配合
srcset提供高倍图：<img src="low.jpg" srcset="high.jpg 2x" max-height="400px"> -
background-image不支持max-height，得换background-size: contain或cover - 真正难的不是写对这三行 CSS，而是判断该限制的是「用户是否看清内容」还是「会不会撑爆布局」——前者看视觉高度（比如文字可读性），后者看布局高度（比如卡片容器高度），两者目标不同，不能混用同一套值
