图片被撑破布局的解决方法是设置 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，再检查父级容器是否“放任自流”。不复杂但容易忽略。
