图片跨栏后模糊主因是浏览器分栏时的非整像素缩放与重采样，display: block仅去空白不解决模糊；需通过尺寸锁定、image-rendering提示及break-inside: avoid三步协同修复。
直接说结论：图片跨栏后模糊，不是因为 columns 本身导致的，而是浏览器在分栏过程中对图片做了非整像素缩放或重采样；加 display: block 只能解决底部空白，对模糊无效；真正起作用的是控制图片渲染上下文和缩放行为。
为什么加了 display: block 还是模糊
很多人试过给 <img> 加 display: block，发现图片底部空白没了，但模糊依旧。这是因为：
-
display: block只改变盒模型参与方式，不干预图片的光栅化过程 - 当
columns把容器切分成多列，而图片宽度刚好落在列宽临界点（比如 249.7px），浏览器可能用 sub-pixel 渲染+双线性插值，造成边缘发虚 - 如果父容器用了
transform: scale()、zoom或启用了系统级缩放（如 Windows 125% DPI），模糊会加剧
修复模糊的关键三步：尺寸锁定 + 渲染提示 + 容器约束
模糊本质是“尺寸不确定 → 浏览器被迫缩放 → 插值失真”。要打断这个链路：
- 强制图片使用原始尺寸或明确的整数宽高：
width: 100%; height: auto;不够，得加image-rendering: -webkit-optimize-contrast;（Safari）和image-rendering: crisp-edges;（Chrome/Firefox） - 避免让图片被
columns拆解：给<img>或其外层卡片加break-inside: avoid;，否则它可能被硬生生卡在两列之间，触发异常重绘 - 确保父容器没意外缩放：检查
transform、font-size继承、container-type: size是否干扰了布局测量
columns 下图片必须用 object-fit 吗
不一定，但强烈建议显式设置：
- 默认
object-fit: fill会拉伸变形，容易模糊；object-fit: contain或cover配合width: 100%才能保证等比缩放 - 如果图片是响应式加载（如
<picture></picture>+srcset），object-fit能让不同 DPR 下的资源正确对齐像素网格 - 注意 Safari 对
object-fit在多列容器中的支持较晚（iOS 16.4+ 才稳定），旧版本需降级为固定宽高的background-image方案
最容易被忽略的兼容性陷阱
不是所有浏览器都把 columns 当作“纯文本流”来处理图片：
- Firefox 会把
<img>当作不可断元素，但若其父容器是display: flex，break-inside: avoid就完全失效——此时必须用column-span: all提升为跨列块 - Chrome 120+ 对
image-rendering: pixelated在多列中支持不稳定，慎用于图标类小图 - 如果图片来自 CMS 或第三方接口，确认返回的 URL 没带动态缩放参数（如
?w=300&h=200），这类服务端裁剪常忽略 DPR，直接放大就糊
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
