17370845950

max-width: 100% 是解决图片撑破容器的核心方案；需配合 height: auto 保持宽高比，避免使用 width: 100%，并注意父容器限制、上下文影响及 CSS 优先级等细节。

图片撑破容器导致布局错乱

响应式页面里， 默认是「固有尺寸」渲染，一旦原始宽度超过父容器（比如在手机上显示一张 1200px 宽的图），就会横向溢出、破坏 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 标签。