必须同时设置 max-width: 100% 和 height: auto 才能实现图片等比缩放，仅设前者会导致高度塌陷或失真；父容器需有明确宽度，否则 max-width 失效。
直接用 max-width: 100% 配合 height: auto 就能实现——前提是图片没被其他样式干扰，父容器宽度明确，且你不需要它被强行放大。
为什么只写 max-width: 100% 不够
漏掉 height: auto 是最常见失误。浏览器不会自动推算缩放后的高度，结果要么高度塌陷为 0，要么卡在原始高度上，图片被压扁或拉长。
-
max-width: 100%只限制宽度上限，不控制高度行为 - 必须显式加
height: auto，让浏览器按原始宽高比重算高度 - 如果同时写了
height: 200px或width: 100%，max-width就会被覆盖失效 - 某些 UI 框架（如 Bootstrap）默认只加
height: auto，忘了补max-width: 100%，图片在窄屏仍会溢出
max-width: 100% 和 width: 100% 的实际差别
它们对图片的影响完全不同，选错会导致失真或模糊：
-
max-width: 100%：图片原始尺寸小于容器时保持原样；大于时才等比缩小——适合响应式场景 -
width: 100%：不管原始多小，一律拉满容器宽度，小图会被强行放大、变糊 - 想让高清图在移动端不缩太小，可加
min-width: 120px，但别和width: 100%同时用，后者会覆盖前者
父容器没设宽度时 max-width: 100% 为啥不生效
max-width 是相对于父容器计算的，不是视口。如果父容器本身没宽度约束，它的“100%”就无从谈起。
- 常见于
div默认display: block但内部有浮动或 flex 子项未清空，导致父容器高度坍塌、宽度不定 - Flex 容器中，图片默认
flex-shrink: 1，但如果父容器设了min-width: 0，图片可能拒绝收缩——此时需给img显式加min-width: 0 - 图片包在
figure或自定义组件里，而该容器没设宽高、又设了overflow: hidden，max-width会因基准缺失而无效
要不要加 display: block
建议加。虽然不影响缩放逻辑，但能解决行内元素固有的底部空白问题。
-
img是替换元素，默认display: inline，底部会留约 4px 空隙 -
display: block直接消除这个间隙，布局更可控 - 如果图片需要居中，配合
margin: 0 auto更可靠（text-align: center在 flex 容器里可能不生效）
真正容易被忽略的是父容器的宽度来源——它必须是可计算的，不能靠内容撑开又没约束。很多“max-width 不生效”的 case，根源都在外层 div 没 width、没 flex-basis、也没 max-width，导致整个链路失去参照。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
