17370845950

图片被撑破布局的解决方法是设置 max-width: 100% 和 height: auto，使其等比缩放适配容器；需确保父容器有明确宽度，并在响应式场景中结合媒体查询控制最大宽度。

图片被撑破布局，通常是因为它默认按原始尺寸显示，超出了父容器宽度。解决方法很简单：给图片设置 max-width: 100%;，让它自动缩放适配容器，同时保持宽高比。

为什么 max-width: 100% 能解决问题

该属性不是强制拉伸或压缩图片，而是设定“最大允许宽度”——当父容器比图片原始宽度窄时，图片会等比缩小；当容器足够宽，图片就按原尺寸显示。关键点在于：它不改变 height，但浏览器会自动维持宽高比，所以不会变形。

必须配合 height: auto 使用

如果只写 max-width: 100%，而 height 是固定值（比如 height: 200px），图片仍可能被拉伸或裁剪。正确写法是：

img {
  max-width: 100%;
  height: auto;
}

这样无论图片原始尺寸多大，都能在容器内安全缩放。

注意父容器是否设置了 width 或 overflow

有时图片还是溢出，可能是父元素本身没限制宽度，或用了 white-space: nowrap、display: inline 等影响换行/包裹的样式。常见排查点：

• 确保图片的直接父容器有明确宽度（如 width: 100% 或 max-width）
• 避免父容器设了 overflow: visible（默认值，一般不用改）但内部有 position: absolute 图片
• 若图片在 flex 或 grid 容器中，加 flex-shrink: 1 或 min-width: 0 防止弹性项目不收缩

响应式场景下可叠加其他规则

比如希望图片在小屏上占满宽度、大屏上最多显示 800px：

img {
  max-width: 100%;
  height: auto;
}
@media (min-width: 768px) {
  img {
    max-width: 800px;
  }
}

这样兼顾移动端适配与桌面端观感。

基本上就这些。核心就两条：max-width: 100% + height: auto，再检查父级容器是否“放任自流”。不复杂但容易忽略。