max-height 必须配合 height: auto 才能保持图片宽高比，否则会导致裁剪、拉伸或无效缩放；推荐 img { max-height: 400px; height: auto; width: auto; }，并根据场景选择 max-width 或 vh 单位。
max-height 是控制图片最大显示高度最直接有效的 CSS 属性，但仅设它还不够——必须配合 height: auto 才能保持原始宽高比，否则图片会被垂直裁剪或拉伸变形。
只用 max-height 会出什么问题
单独写 style="max-height: 300px;" 几乎没效果：浏览器默认按图片原始尺寸渲染，max-height 不会主动触发缩放。常见错误现象包括：
- 图片完全不缩小，超出容器或撑破布局
- 加上
height: 300px后图片被强制拉高/压扁（比例崩坏） - 在 Flex 或 Grid 容器里，图片可能被截断且无提示
max-height 必须和 height: auto 搭配使用
这是保持等比缩放的核心组合。只要父容器宽度可变（比如文章正文），推荐统一加这条规则：
img {
max-height: 400px;
height: auto;
width: auto;
}
关键点：
-
width: auto防止宽度被意外固定（尤其当父容器有width: 100%时） - 如果父容器本身有
max-width，优先让图片响应容器宽度，此时可改用max-width: 100%; height: auto;，max-height只作兜底 - 在 CSS 中写比内联
style更易维护，也避免重复声明
需要同时限制宽高时的取舍
当明确要求「图片不能超过 400px 高、也不能超过 600px 宽」，直接写：
img {
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 的像素值在 Retina 屏上不会自动翻倍，所以 400px 实际物理高度可能偏小。更稳妥的做法是：
- 对关键图片（如 Banner）用
vh单位：max-height: 50vh，让它随视口动态调整 - 配合
srcset提供高倍图，避免缩放后模糊：<img src="low.jpg" srcset="high.jpg 2x" max-height="400px"> - 如果图片用于
background-image，就得换思路——用background-size: contain或cover，max-height对背景图无效
真正难的不是写对这行 CSS，而是判断该限制的是「视觉高度」还是「布局高度」：前者看用户是否看清内容，后者看会不会撑开卡片、破坏网格间距。这两个目标常常冲突，得靠具体场景权衡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
