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。关键点：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 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，而是判断该限制的是「用户是否看清内容」还是「会不会撑爆布局」——前者看视觉高度，后者看布局高度，两者目标不同，不能混用同一套值

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！