根本原因是仅用width:100%缩放图片而未提供多尺寸资源，应结合srcset/sizes或实现响应式，配max-width:100%和height:auto，并避免写死宽高。
图片在不同设备上显示模糊或拉伸变形
根本原因通常是只用 width: 100% 强制缩放原始图片，而没提供适配不同像素密度和视口宽度的多尺寸资源。浏览器只能拉伸或压缩同一张图，高 DPI 屏（如 iPhone、MacBook）下尤其明显。
解决思路不是靠 CSS 单独撑起响应式，而是 HTML + CSS 协同：用 srcset 提供多套图片源，再用 CSS 控制布局行为。
- 始终为
max-width: 100%和height: auto，防止溢出容器 - 避免给图片写死
width或height像素值（如width: 300px），否则会破坏流式布局 - 若用背景图实现响应式，需配合
background-size: cover或contain，但语义性和可访问性不如
用 srcset 和 sizes 让浏览器选最合适的图
srcset 告诉浏览器有哪些图片资源，sizes 告诉它“在不同视口宽度下，这张图大概会占多宽”，浏览器据此选择分辨率最匹配的一张下载。
常见错误是只写 srcset 却漏掉 sizes，此时浏览器默认按 1× 视口宽度选图，无法适配高清屏或小屏设备。
@@##@@
-
400w中的w表示图片固有宽度（单位：像素），不是 CSS 宽度 -
sizes中的100vw指“在 ≤480px 宽的屏幕里，该图显示宽度 ≈ 视口全宽” - 浏览器根据当前视口宽度查
sizes，再结合设备像素比（dpr），从srcset中挑最接近的源
当小屏需要竖构图特写、大屏需要横构图全景时，srcset 不够用——它只换分辨率，不换内容。这时必须用 media 属性做断点切换。
注意：
src 是必填兜底项。
<picture><source media="(max-width: 768px)" srcset="photo-mobile.jpg"><source media="(max-width: 1200px)" srcset="photo-tablet.jpg"> @@##@@ </source></source></picture>
-
media的生效 - 所有
srcset值仍可叠加2x等描述符，例如srcset="photo-1x.jpg, photo-2x.jpg 2x" - 不要在
width/height，这些属性只对
现代方案：直接用 image-set()（CSS-only，兼容性有限）
image-set() 是纯 CSS 方案，适用于背景图场景，语法简洁，但目前仅 Chrome/Firefox 支持较好（Safari 16.4+ 开始支持，iOS Safari 仍弱）。不适合需要 SEO 或无障碍支持的主图。
容易忽略的是：它不感知视口宽度，只感知设备像素比（dpr），所以不能替代 srcset + sizes 的完整响应逻辑。
.hero-banner {
background-image: image-set(
"banner-1x.jpg" 1x,
"banner-2x.jpg" 2x,
"banner-3x.jpg" 3x
);
background-size: cover;
}
- 必须搭配
background-size使用，否则高 DPR 下可能显示不全 - 无法像
- 如果目标用户大量使用旧版 Safari 或微信内置浏览器，建议暂不采用
实际项目中，多数情况应优先用 srcset + sizes；只有当需要更换构图或主体时，才升级到 image-set() 可作为背景图的补充手段，但别指望它覆盖全部场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
