响应式图片需同时设置 max-width: 100% 和 height: auto 防失真，配合 srcset + sizes 实现资源精准加载；必要时用 进行艺术裁剪或格式切换，背景图须设明确高度并规避 fixed 卡顿。
图片不随窗口缩放，基本就是没设 max-width: 100% 或漏了 height: auto ——这两条是响应式的硬性底线，缺一不可。
为什么 max-width: 100% 和 height: auto 必须一起用
只写 max-width: 100%，浏览器会限制宽度但不联动高度，结果图片被压扁或拉长；只写 height: auto 而不控宽，图片仍按原始尺寸渲染，窄屏直接溢出容器。
-
max-width: 100%防止图片撑破父容器，同时允许它比容器小（比如小图居中显示） -
height: auto强制按原始宽高比缩放，避免失真 - 别用
width: 100%替代 —— 它会把小图强行拉宽，模糊失真 - 这条规则必须作用于
<img>元素本身，不能只写在父容器上
srcset + sizes 才算真正适配不同设备
仅靠 CSS 缩放，图片文件还是那个大文件，浪费带宽。要让浏览器选最合适的资源，srcset 和 sizes 必须配对使用。
-
srcset提供多张图，如"photo-400w.jpg 400w, photo-800w.jpg 800w"，每个后缀必须是w或x，不能混用 -
sizes告诉浏览器“这张图在页面里实际占多宽”，例如sizes="(max-width: 600px) 100vw, 50vw" - 如果只写
srcset不写sizes，现代浏览器会忽略整个srcset，直接加载src的图 - 用 DevTools → Network 面板刷新查看实际加载的是哪个 URL，验证是否生效
什么时候该用 <picture></picture> 而不是 <img>
当需要换构图、换格式或做艺术裁剪时，<img> 的 srcset 就不够用了 —— 它只能响应分辨率或视口宽度，没法处理「竖屏特写 vs 横屏全景」这类需求。
-
<source></source>是 AND 匹配：media和type同时满足才启用 - 把最具体、最高优先级的规则放最前面，比如先匹配
(min-width: 1024px) and (min-resolution: 2dppx) type="image/webp" - 拼错
type="image/webp"（比如多写分号）或浏览器不支持，整条<source></source>就被跳过 - 兜底的
<img>必须存在，且src和alt不能省
背景图响应式容易踩的坑
装饰性图片用 CSS 背景图更可控，但常见问题集中在容器无高度、路径失效和移动端 fixed 卡顿。
- 容器必须有明确高度，比如
min-height: 100vh或内部有内容撑开，否则背景不显示 -
background-attachment: fixed在 iOS 和部分安卓浏览器上会失效或卡顿，建议用媒体查询关掉：@media (pointer: coarse) { .hero { background-attachment: scroll; } } - 图片路径错误时，开发者工具 Network 标签页会显示 404；跨域资源需服务端配 CORS
- 加一层
background-color，避免图片加载中或失败时留白
真正难的不是写对某一行代码，而是理解浏览器怎么决策：它看的是 sizes 声明的渲染宽度、设备 DPR、srcset 中各图的真实像素宽，三者匹配才选对图。调试时别只盯 CSS，得去 Network 面板看实际加载了哪个 URL。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
