应使用 max-width: 100% 配合 height: auto 实现图片响应式缩放，避免 width: 100% 导致拉伸或溢出；需注意父容器宽度、flex/grid 行为及浏览器兼容性问题。
图片在响应式布局里撑破容器怎么办
直接用 max-width: 100%，别只写 width: 100%。后者会让小图被强行拉伸变形，前者才真正防止溢出。
常见错误是给 <img> 同时设 width: 100% 和 height: auto，结果在窄屏下正常，宽屏下反而撑满整个父容器、遮盖其他内容——因为没加 max-width 约束上限。
-
max-width: 100%是相对于父容器计算的，不是视口 - 必须配合
height: auto，否则等比缩放失效 - 如果父容器本身没设宽度（比如
div默认 block），max-width: 100%仍会按实际内容宽度生效，可能没效果
想让图片不小于某个尺寸，但又不能无限放大
用 min-width + max-width 组合，而不是只靠 width 或 min/max-width 单独控制。
典型场景：头像图标需要至少显示为 40px 宽，但在移动端又不能占满整行。这时候只设 min-width: 40px 不够，得配 max-width: 100% 防止在小屏上溢出。
-
min-width对<img>生效的前提是它有固有尺寸（比如原始宽高）或已设了width - 纯
min-width: 200px在窄屏下会导致横向滚动，必须搭配max-width: 100% - 不要对
<img>设min-width同时又设width: 100%，后者会覆盖前者
为什么设置了 max-width 还是不生效
大概率是父容器或图片自身被其他样式干扰，最常见的是 display: block 缺失、或外层用了 flex/grid 但没处理图片的收缩行为。
错误现象：图片明明写了 max-width: 100%，却还是超出卡片边界；或者在 Safari 里正常，Chrome 里异常。
- 确保
<img>没被包裹在未设宽高的div里，否则max-width: 100%计算基准为空 - Flex 容器中，图片默认
flex-shrink: 1，但若父容器设了min-width: 0，它就不再收缩——此时需显式加min-width: 0到图片上 - 某些 UI 库（如 Bootstrap）会给
<img>加height: auto但漏掉max-width，得自己补
要不要加 height: auto？必须加
不加 height: auto，max-width 缩放时高度不会等比变化，图片会被压扁或拉长。
尤其当原始图是竖构图（比如 400×600），只设 max-width: 100% 而不设 height: auto，浏览器会保持原始高度，导致比例错乱。
-
height: auto是让浏览器根据宽高比自动算高，不是“不管高度” - 如果同时设了
height: 200px，max-width就完全失效 - 在 CSS Grid 中，有时要额外加
align-self: start避免图片被拉伸填满单元格
width 的 section，里面放了 max-width: 100% 的图片，那这个 “100%” 其实是按内容撑开的宽度算的，不是你预期的视口或卡片宽度。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
