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