必须用max-width: 100%而非width: 100%，因前者设上限、保原图尺寸不放大，后者强制填满易致模糊；height: auto不可省略，否则宽高比失守导致变形或塌陷。
直接给 img 元素设置 max-width: 100% 并配合 height: auto，就能可靠防止图片撑破父容器——这是响应式图片最基础也最关键的控制方式。
为什么必须是 max-width 而不是 width
width: 100% 会强制图片填满父容器，哪怕原图很小也会被拉大，容易模糊；而 max-width: 100% 是设上限：图片比容器小就保持原样，比容器大才缩放，不放大、不变形、不溢出。
- 适合用户上传图、文章插图等尺寸不可控的场景
- 在 Flex/Grid 容器中，
max-width: 100%天然支持收缩，width: 100%可能被默认min-width: auto拦住 - 它作用于图片自身，不依赖父容器是否设了
width或max-width
height: auto 不可省略
只加 max-width: 100% 不够。如果没设 height: auto，浏览器会按初始值（如 height: initial）处理，高度可能塌为 0 或内容高度，导致比例错乱甚至布局断裂。
-
height: auto让浏览器自动按原始宽高比计算高度 - 千万不要同时写
width: 300px和height: 200px这类固定像素值，会强制拉伸且在不同屏幕下失效 - 若父容器有固定高宽（如卡片），可用
object-fit: cover或contain配合，但前提是图片层已先用max-width: 100%; height: auto做好兜底
常见溢出原因与补救
即使写了 max-width: 100%; height: auto，图片仍溢出，往往不是图片本身的问题，而是祖先链没约束好：
- 父容器没设
width或max-width，尤其在大屏下无限撑开 → 给外层加max-width: 1200px或width: 100% - Flex/Grid 项默认
min-width: auto（Chrome 行为），阻止图片收缩 → 加min-width: 0显式释放 - 容器用了
white-space: nowrap或display: inline-block等影响内联元素行为的样式 → 检查并重置 - 图片在
img上，不能指望语义标签自动响应
全屏或高宽比容器中的强化写法
对 banner、全屏图等要求严格不溢出的场景，单靠 max-width: 100% 可能不够，需叠加限制：
- 图片层加
max-height: 100vh+min-height: 100vh（配合居中 flex 容器） - 或更稳妥地写
max-width: 100%; max-height: 100%; height: auto，让浏览器在两个方向都取“不突破”的缩放比例 - 避免用
width: 100%; height: 100%，这会强制拉伸，破坏比例
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
