图片溢出多列容器的主因是原始尺寸超列宽且未自动缩放，解决关键是设max-width: 100%并配合height: auto保持比例；再用object-fit（如cover或contain）控制显示效果，同时确保父容器支持流式布局且无干扰属性。
图片在多列布局中溢出容器，通常是因为图片原始尺寸大于列宽，而默认不自动缩放。解决核心是让图片响应式适配列宽，同时保持清晰和比例。
给图片设 max-width: 100%
这是最基础也最关键的一步。它确保图片宽度不会超过其父容器（即当前列的宽度）：
img {
max-width: 100%;
height: auto;
}注意：必须配合 height: auto，否则图片可能被拉伸或压扁。仅设 width: 100% 会强制拉宽，破坏比例；max-width 是安全上限。
用 object-fit 精确控制显示效果
当图片宽高比与容器不一致时，max-width: 100% 只能保证不溢出，但可能留白或裁剪不当。这时靠 object-fit 定义内容如何适应容器：
立即学习“前端免费学习笔记（深入）”；
-
object-fit: contain—— 完整显示图片，等比缩放，四周可能留白（适合需看清全图的场景） -
object-fit: cover—— 填满容器，等比缩放并裁剪多余部分（适合封面图、卡片图，最常用） -
object-fit: scale-down—— 在none和contain中选更小的渲染方式，适合不确定图片是否已足够小的情况
记得为图片加 height（如固定高度或 aspect-ratio），否则 cover 或 contain 不会生效：
img {
max-width: 100%;
height: 200px; /* 或使用 aspect-ratio: 4/3 */
object-fit: cover;
}确保父容器支持多列且不干扰图片
多列布局（如 column-count 或 column-width）本身不会导致溢出，但若列内元素设置了 white-space: nowrap、float、或未清除浮动，就可能破坏流式行为：
- 避免给图片父元素设
display: inline-block或float，除非有明确布局需求 - 如果图片在
figure或自定义卡片中，确保该容器也设了max-width: 100%和overflow: hidden（尤其搭配object-fit: cover时） - 检查是否意外触发了
min-width: auto（如 flex 项目默认行为），可显式设min-width: 0防止撑开
补充：响应式图片建议
对性能和清晰度要求高的场景，别只依赖 CSS 缩放：
- 用
srcset提供不同分辨率源，让浏览器选最合适尺寸 - 对关键图片，提前按常见列宽（如 300px、500px、800px）切好尺寸，再用
max-width控制 - 避免在 HTML 中写死
width和height属性，改用 CSS 控制，便于响应式维护
