max-width: 100% 失效主因是缺乏参照宽度或父容器为 flex/grid 导致图片被拉伸；应配合 height: auto、父容器明确宽度及必要时用 object-fit 替代 overflow: hidden。
图片超出容器时，max-width: 100% 为什么有时没用？
因为 max-width: 100% 只限制「最大宽度」，不改变图片的固有尺寸行为。如果父容器是 display: flex 或 display: grid，图片可能被当作弹性项拉伸；如果父容器没有明确宽度（比如 width: auto 的 div），图片仍会按原始尺寸渲染，max-width 就失去参照基准。
常见错误现象：img 在响应式卡片里撑破容器、在 flex 布局中溢出右侧、或在移动端显示远大于屏幕。
- 确保父容器有明确宽度（如
width: 100%、max-width: 600px或设为flex-basis） - 对图片加
height: auto防止宽高比失真 - 若父容器是
flex，给图片加flex-shrink: 0会阻止压缩，反而加剧溢出——应改为flex-shrink: 1或直接删掉
overflow: hidden 能截掉溢出图片，但为什么推荐慎用？
它只是「视觉遮盖」，不解决根本问题：图片实际尺寸仍在 DOM 中，可能影响布局流、导致滚动条意外出现、或干扰可访问性（屏幕阅读器仍读取完整图片）。
典型误用场景：给卡片容器加 overflow: hidden 来“修复”头像溢出，结果圆角失效（border-radius 被裁剪）、阴影被截断、点击热区变小。
立即学习“前端免费学习笔记（深入）”；
- 仅在明确需要「强制裁剪」时使用（如封面图统一比例缩放后居中裁切）
- 配合
object-fit: cover和object-position才能可控裁剪 - 避免对
body或全站容器滥用，否则可能掩盖真实布局问题
真正可靠的组合方案：max-width: 100% + height: auto + 父容器约束
这是最轻量、语义清晰、无障碍友好的方式，适用于绝大多数响应式图片场景。
img {
max-width: 100%;
height: auto;
}
<p>.card-img {
width: 100%;
max-width: 400px;
}关键点：
-
height: auto必须写，否则图片高度塌陷或拉伸变形 - 父容器（如
.card-img）需有宽度约束，否则max-width: 100%参照的是其内容宽度，无效 - 不要给
img设固定width或height，那会覆盖max-width行为
遇到 flex/grid 容器必须裁剪时，用 object-fit 替代 overflow: hidden
当需要保持容器尺寸统一（如网格列表中的头像/封面），优先用 object-fit 控制图片填充方式，而非靠 overflow: hidden 硬裁。
.thumbnail {
width: 120px;
height: 120px;
overflow: hidden; /* 可选：仅用于兜底旧浏览器 */
}
<p>.thumbnail img {
width: 100%;
height: 100%;
object-fit: cover; /<em> 填满并裁切 </em>/
object-position: center;
}注意：
-
object-fit: cover和contain行为差异大：cover保证填满但可能裁边，contain保证全显但留白 - Safari 旧版本（object-fit 支持不稳定，此时才考虑加
overflow: hidden作为降级 - 绝对定位的图片不响应
object-fit，需确保是常规流内元素
图片溢出本质是尺寸参照链断裂或渲染模式错配，不是单靠一个 CSS 属性能“修好”的。最容易被忽略的是父容器是否真的具备宽度上下文——很多问题查到最后，都是因为外层 div 缺少 width 或被 flex 默认行为绕过了约束。
