max-width: 100% 必须搭配 display: block 且父容器需有明确 content-box 宽度才生效；因 img 默认 inline，其 max-width 参考行框而非父容器 content 区，且 baseline 对齐导致底部留白干扰布局。
直接结论：max-width: 100% 必须搭配 display: block，且父容器需明确 content-box 尺寸，否则无效。
为什么 max-width: 100% 单独写没用
因为 <img> 默认是 inline 元素，max-width: 100% 实际参考的是“行框宽度”（line box），不是父容器的 content 区域。更麻烦的是，它自带 baseline 对齐，底部会留白——这个空白在缩放或布局中会被算入高度，进一步干扰宽度计算。
常见错误现象：max-width: 100% 写了，图片仍横向溢出、触发水平滚动条、破坏 flex 栅格对齐。
- 必须加
display: block或vertical-align: top（后者治标不治本） - 避免用
width: 100%替代——它强制拉伸，可能变形；max-width是保比例的安全上限 - 如果父容器用了
box-sizing: border-box（现代项目基本都这样），注意它的padding和border不参与max-width: 100%的计算，图片实际可用宽度 = 父容器 content 宽度
父容器 content-box 尺寸不明确就白搭
当父容器 width 为 auto、又没被 flex/grid/float 等约束时，max-width: 100% 的“100%”等于当前行宽（比如视口宽度），而不是你预期的卡片或栏目宽度。
立即学习“前端免费学习笔记（深入）”；
使用场景举例：一个 .card { width: 320px; } 里放 <img>，但图片还是撑破——大概率是中间嵌套了未设宽的 <div> 或用了 display: inline 容器。
- 检查所有祖先元素，确保至少有一层有明确
width、max-width，或处于display: flex/grid中受 track 限制 - 用浏览器开发者工具选中图片，看 computed width 是否真等于父容器 content 宽度；若显示 “intrinsic” 或远大于预期，说明继承链断了
- 临时加
outline: 1px solid red到父容器，确认它是否真的“占了你认为的那么宽”
overflow: hidden 不是给 img 加的，是给 wrapper 加的
想靠 overflow: hidden 强制裁剪？别往 <img> 上写——替换元素不支持该属性，写了也无效。必须用一层包裹元素，且该 wrapper 要满足三个条件：
- 直接包住
<img>（不能隔层） - 设
overflow: hidden - 自身有明确宽高（
height不能是auto，否则部分浏览器不触发裁剪）
典型结构：
.img-wrapper {
width: 300px;
height: 200px;
overflow: hidden;
}
.img-wrapper img {
display: block;
max-width: 100%;
height: auto;
}
注意：height: auto 在 wrapper 有固定高时，会让图片按比例缩放后居中留白；如需填满，得配合 object-fit: cover，但那是另一层控制逻辑。
容易被忽略的兼容性细节
移动端 Safari 和部分安卓浏览器对 max-width: 100% + height: auto 的解析略有差异，尤其在 srcset 切换分辨率后首次渲染时。最稳妥的做法是：
- 始终显式写
height: auto，别依赖默认值 - 避免在父容器上用
transform: scale()同时又依赖max-width——缩放会放大整个盒模型，裁剪只认原始尺寸 - 如果用
object-fit，记得加object-position控制裁剪锚点，否则cover可能切掉关键内容
真正起作用的从来不是单一行 CSS，而是 display 类型、盒模型设定、祖先尺寸约束这三者咬合的结果。漏掉任意一环，max-width: 100% 就只是看起来写了而已。
