max-width: 100% 是解决图片撑破容器的核心方案；需配合 height: auto 保持宽高比，避免使用 width: 100%，并注意父容器限制、上下文影响及 CSS 优先级等细节。
图片撑破容器导致布局错乱
响应式页面里，flex 或 grid 布局，甚至拖出滚动条。这不是图片本身的问题，而是缺少尺寸约束。
max-width: 100% 是最简解法
给所有响应式图片加这一条规则即可解决 90% 的溢出问题。它让图片宽度最多等于其包含块宽度，同时保持原始宽高比：
img {
max-width: 100%;
height: auto;
}
注意必须配 height: auto，否则可能被拉伸或压扁。不要写 width: 100% —— 那会强制拉满，破坏清晰度和比例。
需要适配不同场景的额外处理
仅靠 max-width: 100% 不够时，常见补充策略：
立即学习“前端免费学习笔记（深入）”；
- 对头图/轮播图等重要图片，用
object-fit: cover+ 固定容器尺寸，避免留白或变形 - 在
picture元素中配合srcset和sizes，让浏览器选更小分辨率的图源，从源头减负 - 若图片作为背景，改用
background-image并设置background-size: contain或cover，更可控 - 服务端生成缩略图时，确保前端加载的是匹配视口宽度的版本，而不是全尺寸图再靠 CSS 压缩
容易被忽略的细节
有些情况 max-width: 100% 失效，往往因为：
- 父容器没设
width或max-width，比如position: absolute的祖先元素未限制尺寸 - 图片在
table或inline上下文中，受默认white-space或表格布局影响 - CSS 优先级被更高权重的规则覆盖（如内联样式或
!important冲突） - 使用了
image-rendering: pixelated等实验性属性，干扰了尺寸计算
真正要稳，得检查图片的完整继承链和盒模型表现，不能只盯一个 img 标签。
