img-fluid不解决清晰度下降问题，它只控制缩放行为，不处理设备像素比（DPR）；在Retina/4K屏上模糊的根本原因是浏览器加载了1x图却按2x物理像素渲染，必须通过srcset+x描述符提供匹配DPR的多倍图，并确保src属性不干扰fallback、文件名与格式严格对应，同时配合media query+@2x图+background-size等手段协同解决。
img-fluid 不解决清晰度下降问题，它只控制缩放行为，不处理设备像素比（DPR）。在 Retina/4K 屏上模糊，根本原因是浏览器加载了 1x 图却按 2x 物理像素渲染——你得给它对的图、并告诉它怎么用。
srcset + x 描述符必须配对使用，否则高 DPR 设备永远拿不到 @2x 图
很多人写了 srcset="logo.png 1x, logo@2x.png 2x" 却仍模糊，常见原因是：src 属性还指向 logo.png，而浏览器在 DPR=2 时本该跳过它直接加载 logo@2x.png，但若构建工具重写路径失败、或 CDN 缓存了旧 src，就会 fallback 到 1x。
- 务必检查 DevTools 的 Network 面板，确认实际请求的是
logo@2x.png，而不是logo.png - 不要混用
x和w描述符：srcset="logo.png 1x, logo@2x.png 780w"会让浏览器忽略1x，只按宽度匹配 -
sizes在纯 DPR 场景下非必需，但加了更稳妥：sizes="100vw"明确告诉浏览器“这张图始终占满视口” - 文件名必须严格对应：不能是
logo@2x.webp配logo.png 1x，格式也要一致（都用 PNG 或都 WebP）
background-image 模糊不是 CSS 类的问题，是没切图+没媒体查询
background-image 完全不响应 srcset 或 img-fluid，它只认一条 URL。你在 Bootstrap 里加 .bg-image 类，不会自动换图。
- 必须手动提供多倍图：
hero.jpg（1x）、hero@2x.jpg（物理尺寸翻倍，比如 2400×1200px） - 媒体查询要覆盖主流高 DPR 场景：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)—— 少一个就漏掉旧 Safari 或新 Chrome -
background-size必须设为逻辑尺寸：background-size: 1200px auto（不是2400px），否则 @2x 图会被当 1x 拉伸渲染 - 慎用
image-set()：虽然语义清晰，但 Firefox 对image-set("a.jpg" 1x, "a@2x.jpg" 2x)支持不稳定，生产环境建议优先用媒体查询
object-fit + aspect-ratio 是修复卡片图变形+模糊的关键组合
.card-img-top 默认只设 width: 100% 和 height: auto，一旦父容器有固定高度（比如 min-height: 200px），图片就会被拉伸——这不是模糊，是几何失真，但用户感知就是“糊”。
-
aspect-ratio必须加在.card上，不是.card-img-top；它约束的是容器逻辑尺寸，让object-fit: cover有裁剪依据 -
.card-img-top必须同时设height: 100%和object-fit: cover，缺一不可；否则object-fit不生效 - 如果项目需兼容 IE11 或 Safari padding-top 百分比技巧，但注意：它生成的是“伪高度”，
background-image无法在里面居中，得靠绝对定位 +top: 0; left: 0; width: 100%; height: 100% - 别用
background-image替代<img>做卡片图——语义丢失、SEO 友好性归零、可访问性（alt 文本）失效
SVG 是唯一真正省心的高清方案，但要注意加载方式
SVG 天然矢量，缩放无损，也不受 DPR 影响。但“用了 SVG 就一定高清”是个错觉——如果 SVG 是通过 <img src="icon.svg"> 加载，且没配 width/height 或 viewBox，它可能被拉伸变形；如果用图标字体（如 Font Awesome v4），边缘仍会发虚。
立即学习“前端免费学习笔记（深入）”；
- 内联 SVG 最可靠：
<svg viewBox="0 0 24 24">...</svg>，完全规避资源加载和渲染链路 - 用
<img>加载 SVG 时，必须确保 SVG 文件本身含viewBox，且 HTML 中不写死width/height（让其响应式缩放） - Font Awesome 必须用 v5+ 的 SVG with JS 方式（CDN 或 NPM），禁用 v4 的图标字体 fallback；若强依赖字体方案，加
text-rendering: optimizeLegibility仅能缓解，无法根治 - 注意构建工具：Webpack/Vite 默认不处理
.svg的src引用，可能把 SVG 当作静态资源复制，但没注入viewBox，导致渲染异常
srcset 或媒体查询是否生效）、容器约束（aspect-ratio 是否正确）、渲染控制（object-fit / background-size 是否匹配逻辑尺寸）四个环节。少一个，模糊就回来。 
