根本原因是浏览器在html解析阶段就基于错误尺寸请求图片；解决关键在于css保比例、srcset提供多尺寸资源、sizes声明实际占用宽度。
手机端图片显示模糊、撑破布局、加载慢——根本原因不是图不够大，而是浏览器在解析 HTML 阶段就发起了错误尺寸的请求。解决它不靠 JS，也不靠“调大 width”，关键在三件事：CSS 保比例、srcset 提供多尺寸资源、sizes 告诉浏览器“这张图实际会占多宽”。
max-width: 100% + height: auto 是底线，但光这样远远不够
这两条 CSS 是防止图片溢出和拉伸的强制守则：
-
max-width: 100%确保图片宽度不超过父容器（注意：不是视口） -
height: auto强制按原始宽高比缩放，任何显式的height或min-height都会破坏它 - 如果父容器是 Flex 项，记得加
min-width: 0，否则默认的min-width: auto会锁死收缩 - 仅设
width: 100%是危险操作——小图会被强行拉宽，糊成一片
srcset + sizes 才真正决定手机加载哪张图
浏览器在 HTML 解析时就发起图片请求，srcset 和 sizes 是它做决策的唯一依据。没有它们，手机也会下载桌面用的 2000w 图。
-
srcset列出可用资源，例如："photo-400w.jpg 400w, photo-800w.jpg 800w, photo-1200w.jpg 1200w"——这里的400w指图片固有宽度为 400 CSS 像素，不是给 2x 屏专用 -
sizes必须是条件表达式，例如："(max-width: 768px) 100vw, 50vw"——意思是“小屏占满视口，大屏占一半”，它必须和你实际 CSS 布局中图片的渲染宽度一致 - 常见错误：
sizes="100vw"看似安全，但如果父容器max-width: 600px，桌面端仍会加载远超所需的图 - 漏写
sizes，或写成固定值，srcset就退化为只看设备像素比，失去布局感知能力
picture + source 用于换构图或强控格式，别滥用
当手机需要裁人脸特写、桌面要展全景，或必须优先用 webp 但降级到 jpg 时，<picture></picture> 是唯一选择。
- 每个
<source></source>的media和type是 AND 关系，顺序决定匹配优先级：最具体的规则放最前 - 必须以
<img>结尾，且它必须带src和alt，否则无兜底、无障碍失效 -
<picture></picture>不解决“等比缩放”问题，它解决的是“要不要换一张图”的问题；缩放逻辑仍要靠外层 CSS 控制 - 装饰性图片（如横幅背景）更适合用 CSS
background-image+ 媒体查询，但关键内容图绝不能这么干——语义丢失、无法被屏幕阅读器识别
viewport 和父容器宽度常被忽略，却直接导致失效
再好的 srcset 也救不了没生效的 viewport 或失控的父容器。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在最前面，且不能被 JS 动态覆盖或禁用 - 图片若直接挂在
下且无包裹容器，max-width: 100%会让它撑满整个视口，小图放大即模糊 - Flex/Grid 布局中，确保父容器有明确尺寸上下文，比如
flex: 1、grid-column: 1 / -1，否则图片可能得不到有效约束 - 真机测试比模拟器更可靠：iOS Safari 对
sizes解析更严格，某些 Android WebView 会忽略type="image/webp"
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
