max-height 必须与 height: auto 和 width: auto 同时使用才能实现等比缩放，单独设置 max-height 无效，因浏览器默认按原始尺寸渲染且不自动缩放；在 flex/grid 中易被截断；配合 max-width 时缩放优先满足更紧约束；移动端建议用 max-height: 50vh 并结合 srcset；background-image 不支持 max-height。
max-height 必须和 height: auto 一起用，否则无效或导致裁剪、拉伸。
为什么只写 max-height 没效果？
浏览器默认按图片原始尺寸渲染，max-height 不会主动触发缩放。常见现象包括：
- 图片完全不缩小，撑破容器或页面布局
- 加上
height: 400px后被强制压扁（比例崩坏） - 在 Flex/Grid 容器中被无声截断，没有报错提示
max-height 和 height: auto 怎么配？
这是保持等比缩放的最小必要组合。关键点：
- 必须同时声明
height: auto和width: auto，后者防父容器width: 100%导致宽度被意外锁定 - 推荐写法：
img { max-height: 400px; height: auto; width: auto; } - 如果父容器已有
max-width，优先用max-width: 100%+height: auto，max-height仅作兜底
同时限制宽高时要注意什么？
写 max-width: 600px; max-height: 400px; height: auto; width: auto; 是可行的，但缩放逻辑是「先满足更紧约束」：
- 一张 2000×1000 的图，先按高度缩到 400px → 宽度变成 800px → 超过
max-width→ 再按宽度缩到 600px → 高度变成 300px - 这个过程由浏览器自动完成，无需 JS 干预
- 别写
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，而是判断该限制的是「用户是否看清内容」还是「会不会撑爆布局」——前者看视觉高度，后者看布局高度，两者目标不同，不能混用同一套值。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
