图片放大模糊本质是像素拉伸，真正不失真仅靠高分辨率原图或SVG矢量格式；CSS的image-rendering（如pixelated）和srcset多倍图可改善但非根本解。
图片放大后模糊，本质是像素被拉伸了
浏览器默认用双线性插值放大图片，<img> 的 width 和 height 属性只是缩放显示尺寸，不增加原始像素。原图 200×200，硬设成 800×800，必然糊——这不是 CSS 能修好的事。
真正能“不失真”的只有两种情况：原图本身分辨率够高；或用矢量格式（如 .svg）。
用 image-rendering 控制浏览器插值方式
这个 CSS 属性能干预放大时的采样算法，对位图（.png、.jpg）有一定改善，但效果有限，且兼容性要注意：
常见错误现象：设了 image-rendering: crisp-edges 却没生效 —— 因为 Chrome/Edge 默认忽略它，除非加前缀或满足特定条件。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 对图标、像素画等硬边图像，优先用
image-rendering: -webkit-optimize-contrast（Safari）、image-rendering: crisp-edges（Firefox），Chrome 需配合image-rendering: pixelated才强制最近邻插值 -
pixelated是目前最可靠的“不模糊”选项，但只在放大时有效（缩小无效），且 Safari 15.4+ 才支持无前缀版本 - 别对照片类图片用
pixelated，锯齿会非常明显
示例：
.pixel-art {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
image-rendering: pixelated;
}
响应式场景下，用 srcset 提供多倍图
移动端高清屏（dpr=2 或 3）下，1px CSS 像素对应多个物理像素。如果只给一张 1x 图，浏览器会强行放大，立刻模糊。
使用场景：头像、商品图、Banner 等需适配 Retina 屏的图片。
实操建议：
- 准备 1x、2x、3x 三档图（如
logo.png、logo@2x.png、logo@3x.png） - 用
srcset+sizes让浏览器按设备像素比自动选图：<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x"> - 避免只靠
width/height缩放单张图来“适配”，那是自欺欺人
SVG 是唯一真正不失真的放大方案
矢量图没有像素概念，缩放到任意尺寸都清晰。适合 Logo、图标、图表、简单插画。
容易踩的坑：
- 把 PNG 截图另存为 SVG ≠ 矢量化 —— 那只是包了个壳，放大照样糊
- SVG 内嵌大量光栅元素（比如用
<image>引入 PNG）也会失真 - 复杂图形导出 SVG 后体积暴增，需用工具（如 SVGO）压缩
直接使用方式最简单：<img src="logo.svg" width="200" height="200">，或者内联 SVG 以便用 CSS 控制颜色和动画。
失真问题从来不是“怎么让图片变大还不糊”，而是“有没有提供足够多的原始信息”。该换图就换图，该转矢量就转矢量，CSS 只是最后一步的微调手段。
