最可靠方式是用 srcset 配合 sizes 实现多倍图适配，image-set() 因浏览器支持差不可用于生产；background-image 应用媒体查询匹配分辨率并显式设置 background-size；object-fit 仅控制渲染形态，不解决源图选择问题。
直接用 srcset 配合 sizes 是最可靠的方式，image-set() 基本不能用——Firefox 完全不支持，Chrome 仅限 background-image，Safari 16.4+ 才稳定。
用 img 标签时必须走 srcset + sizes
浏览器对 img 的多倍图支持只认 srcset。单纯写两个 src 或靠 JS 切换路径，无法触发设备像素比（dpr）自动匹配，高分屏照样糊。
-
srcset里按物理像素提供不同尺寸图：logo.png（1x）、logo@2x.png（2x）、logo@3x.png（3x），注意命名只是惯例，关键在真实宽高比 -
sizes必须写，否则浏览器无法判断“这个img在页面中最终会渲染成多宽的 CSS 像素”，进而无法选对源图。例如：sizes="(max-width: 768px) 100vw, 200px" - HTML 示例：
<img src="logo.png" srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x" sizes="(max-width: 768px) 100vw, 200px" alt="logo">
用 background-image 时优先选媒体查询 + background-size
想用 background-image 放 logo，image-set() 不是生产选项。稳妥做法是用 @media 匹配 min-resolution: 2dppx，并显式控制缩放。
- 基础样式写 1x 图：
background-image: url(logo.png); background-size: 100% 100%; - 高清屏覆盖：
@media (min-resolution: 2dppx) { background-image: url(logo@2x.png); background-size: 50% 50%; }——因为 @2x 图是双倍物理像素，缩到一半才和 1x 视觉尺寸一致 - 别漏掉
background-size：不设的话，@2x 图会以原尺寸（比如 200×200px）撑满一个 100×100px 的容器，必然模糊拉伸 - 兼容旧版 Safari 可加
@media (-webkit-min-device-pixel-ratio: 2)，但min-resolution: 2dppx已覆盖所有现代浏览器
object-fit 是防糊的兜底手段，不是替代方案
当 logo 图片尺寸和容器不匹配、又没法改 HTML 结构时，object-fit: contain 或 cover 能避免失真拉伸，但它不解决“该加载哪张图”的问题。
-
object-fit只控制已有图片如何填入容器，不能触发浏览器选择更高清源文件 - 如果
img的src指向的是 1x 图，哪怕容器再小、object-fit再准，Retina 屏上仍是 1x 渲染，细节发虚 - 它真正起作用的场景是：你已用
srcset加载了正确源图，但容器宽高比动态变化（比如响应式 banner），此时object-fit: contain确保 logo 始终完整可见且不畸变
真正容易被忽略的点是：无论用 img 还是 background-image，都必须让图片的 CSS 渲染尺寸（width/height 或 background-size）与源图物理像素严格对应——1x 图配 100% 尺寸，2x 图配 50% 尺寸，差一点就会触发插值缩放，糊得毫无商量余地。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
