没有“完美过渡”这回事，只有“合理适配组合”；需同时配置srcset、sizes、CSS响应式样式及viewport，缺一不可。
直接说结论：没有“完美过渡”这回事，只有“合理适配组合”。单靠 <img> 标签本身做不到自动过渡，必须配合 srcset、sizes、CSS 控制和 viewport 设置，缺一不可。
为什么 img 默认不响应式？
浏览器加载 <img src="a.jpg"> 时，只按原始尺寸渲染，不感知屏幕宽度、像素密度或容器变化。哪怕你设了 width: 100%，它也只缩放显示，不换图、不选分辨率、不防失真。
- 小屏上拉伸模糊：原始图太大，强制缩放导致锯齿
- 大屏上加载低清图：没提供高清资源，Retina 屏看着发虚
- 横竖屏切换卡顿：没监听视口变化，
sizes不更新就白写了
srcset + sizes 必须成对出现
srcset 告诉浏览器“我有这些图”，sizes 告诉它“在什么条件下用多宽的图”。光写 srcset 浏览器只能猜，效果不稳定。
-
srcset用w单位（如"small.jpg 480w, large.jpg 1200w"）时，sizes必须对应媒体条件，例如：sizes="(max-width: 480px) 100vw, (max-width: 1200px) 50vw, 33vw" - 如果用
x单位（如"logo-1x.png 1x, logo-2x.png 2x"），sizes可省略，但仅适用于固定尺寸图标类资源 - 不要混用
w和x—— 浏览器会忽略整组srcset
CSS 层必须兜底，且不能破坏 intrinsic 尺寸
即使 srcset 选对了图，CSS 写错照样溢出、拉伸、错位。
立即学习“前端免费学习笔记（深入）”；
- 正确写法：
img { max-width: 100%; height: auto; display: block; }——max-width是关键，width: 100%会强制拉伸 - 父容器必须有明确宽度（比如
max-width: 100%或width: 100%），否则max-width: 100%失效 - 避免给
img设固定height或min-height，否则破坏宽高比，小图被撑开变形 - 如果图片是背景图，改用
background-size: contain或cover，而非<img>
viewport 和设备像素比不能漏
所有响应式逻辑都建立在浏览器正确识别设备尺寸的基础上。没设 viewport，srcset 的 max-width 条件全失效。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>最前面 - 移动端测试时关掉双击缩放（加
user-scalable=no要谨慎，影响可访问性） - 真机调试注意：iOS Safari 对
sizes解析更严格，Android Chrome 容错稍高；折叠屏设备需额外加@media (min-aspect-ratio: 1/1)微调
真正麻烦的不是写几行 srcset，而是每张图都要预估它在不同断点下的实际占用宽度，再反推需要哪些 w 版本、怎么写 sizes 表达式——这个过程没法全自动，得结合设计稿和真实设备反复验证。
