根本原因是未用 sizes 属性告知浏览器图片在移动端的实际渲染宽度，导致浏览器默认按 100vw 加载大图；需配合 srcset（w 或 x 描述符）和 object-position 精准控制加载与裁切。
只设 max-width: 100% 不够，移动端图片模糊、加载慢、关键内容被裁切，根本原因是没告诉浏览器“这张图在手机上实际占多宽”和“该用哪张图”。
为什么 img { max-width: 100%; height: auto; } 在移动端经常失效
这个 CSS 规则只解决“缩放不变形”，不解决“加载哪张图”。浏览器在解析 HTML 阶段就发起请求，如果没声明尺寸上下文，它默认按 100vw（全视口宽度）选图——结果小屏手机下载一张 1200w 的图，再缩成 320px 显示，浪费带宽、拖慢 LCP、还可能触发解码卡顿。
- 常见错误现象：DevTools Network 面板里看到手机请求的是 desktop.jpg，而不是 mobile.jpg
- 真正起作用的是
sizes属性，不是 CSS 宽度；CSS 只控制渲染，sizes才告诉浏览器“我打算怎么渲染” - 如果父容器用了
flex或grid，且子项宽度动态变化（比如flex: 1），sizes必须匹配实际布局逻辑，不能硬写100vw - 漏掉
viewportmeta 标签会导致sizes中的vw单位计算错误，iOS Safari 尤其敏感
sizes 怎么写才不踩坑
sizes 是字符串，不是 CSS，浏览器按从左到右顺序匹配第一个满足条件的值。写错语法或覆盖不全，就会静默 fallback 到 100vw。
- 必须覆盖全部视口范围：比如断点是
480px和768px，就得写"(max-width: 480px) 100vw, (max-width: 768px) 50vw, 300px"；漏掉max-width: 480px，320px 屏就走最后的300px，可能错配 - 值必须是有效长度或媒体条件，不能写
width: 300px或calc(100% - 2rem)，这些会被忽略 - 推荐用
vw+ 媒体查询组合，比如"(max-width: 480px) 100vw, (max-width: 768px) 80vw, 60vw"，比固定像素更适配折叠屏、横竖屏切换 - 如果图片在 flex 容器中占满剩余空间，
sizes写"100vw"很可能错——此时应测出真实渲染宽度（如用 DevTools → Computed → width），再反推sizes值
srcset 用 w 还是 x？混用会直接失效
选 w（宽度描述符）还是 x（DPR 描述符），取决于你要解决的问题：前者适配布局宽度变化，后者适配屏幕清晰度。二者语义不同，浏览器行为完全不同，严禁混写。
- 要适配小屏/大屏布局（比如 banner 在手机占满、桌面只占半屏），必须用
w：srcset="hero-400w.jpg 400w, hero-800w.jpg 800w"，且必须配sizes - 要适配 Retina 屏（比如 iPhone 加载 @2x 图），用
x：srcset="logo@1x.png 1x, logo@2x.png 2x, logo@3x.png 3x"；此时sizes可省略，浏览器按设备 DPR 匹配 - 混用是未定义行为：
"photo-400w.jpg 400w, photo@2x.jpg 2x"在 Chrome 中可能整个srcset被忽略 - 用
w时，图片宽度建议按 1.5× 步进（320w → 480w → 768w → 1200w），覆盖主流设备逻辑像素宽度
关键内容不被裁切：靠 object-position，不是靠猜
object-fit: cover 只保证“填满不拉伸”，但裁哪部分由 object-position 决定。移动端竖屏下，默认居中常把人脸裁掉一半。
- 避免用
top/left等关键词，改用百分比：object-position: 50% 20%表示焦点横轴居中、纵轴从顶部起算 20%，对人像更安全 - 配合媒体查询动态调整：
@media (max-width: 768px) { img { object-position: 50% 15%; } }，小屏时进一步上移焦点 - 调试时打开 DevTools → Elements → 选中
img→ Computed → 搜索object-position，确认生效；iOS Safari 对该属性支持良好，但旧版 Android WebView 可能忽略 - 别依赖
background-image做响应式插图——它无法设置object-position，也无法通过srcset切换资源，关键图文务必用<img>
最常被忽略的其实是 sizes 与实际 CSS 布局的同步：哪怕 srcset 写得再全，只要 sizes 告诉浏览器一个错误的宽度，它就会加载错的图。动手前，先用 DevTools 测出图片在各断点下的真实渲染宽度，再反推 sizes 字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
