设置 box-sizing: border-box 可统一元素尺寸计算方式，避免因 padding 和 border 导致容器溢出；2. 图片需设置 max-width: 100% 和 height: auto 以防止超出容器；3. 配合容器的宽度限制、overflow 处理及弹性布局设置，可有效解决图片溢出问题。
图片溢出容器是前端开发中常见的布局问题，尤其在响应式设计中更容易出现。使用 box-sizing 配合其他 CSS 技巧，能有效控制元素尺寸行为，避免内容溢出。
理解 box-sizing 的作用
CSS 默认的 box-sizing: content-box 会让元素的 width 只包含内容区域，padding 和 border 会额外增加总宽度。这容易导致设置了 padding 或 border 的容器实际宽度超过父级，间接引起内部图片溢出。
将 box-sizing 设置为 border-box 后，width 包含了 content、padding 和 border，更利于精确控制布局：
* {
box-sizing: border-box;
}
全局设置后，所有元素的尺寸计算方式统一，减少意外溢出。
立即学习“前端免费学习笔记（深入）”；
限制图片最大宽度
即使使用 border-box，图片本身若未限制尺寸，仍可能超出容器。关键在于设置：
img {
max-width: 100%;
height: auto;
}
max-width: 100% 确保图片不会宽过其容器，height: auto 保持原始宽高比。这是防止图片横向溢出的核心规则。
配合容器设置增强控制
为图片的父容器添加明确的尺寸和溢出处理，进一步保障布局稳定：
- 给容器设置 width 或 max-width
- 使用 overflow: hidden 裁剪溢出部分（可选）
- 结合 flex 或 grid 布局时，注意设置 flex-shrink: 1
例如：
.container {
width: 300px;
padding: 10px;
box-sizing: border-box;
overflow: hidden;
}
<p>.container img {
max-width: 100%;
height: auto;
}</p>基本上就这些。box-sizing 改变的是盒模型计算方式，真正阻止图片溢出的关键是 max-width: 100% 配合 box-sizing: border-box 的整体布局策略。不复杂但容易忽略细节。
