真正可控的方式是用<picture>+<source>配合媒体查询，让浏览器按视口宽度自主选择最合适的图片资源；关键点包括<source>的media属性须写标准CSS语法如(max-width: 768px)，<img>必须作为兜底项置于最后且带src和alt，资源需真实存在并按1x/2x匹配DPR。
图片在不同屏幕宽度下不缩放或被裁剪
直接用 <img> 标签加 width: 100% 很容易导致拉伸变形或高度塌陷，尤其当父容器没有明确高度时。真正可控的方式是用 <picture> + <source> 配合媒体查询，让浏览器按视口宽度自主选择最合适的图片资源。
关键点：
-
<source>的media属性必须写标准 CSS 媒体查询语法，比如(max-width: 768px)，不能漏括号或写成max-width: 768px -
<img>标签必须放在<picture>最后，作为兜底项（fallback），且必须带src和alt—— 缺一不可，否则部分浏览器会不渲染 - 所有
srcset中的图片路径需真实存在，且尺寸建议按 1x/2x 匹配设备像素比，例如手机用hero-800w.jpg和hero-1600w.jpg
<picture> <source media="(max-width: 768px)" srcset="hero-mobile.jpg, hero-mobile@2x.jpg 2x"> <source media="(min-width: 769px)" srcset="hero-desktop.jpg, hero-desktop@2x.jpg 2x"> <img src="hero-desktop.jpg" alt="首页主图"> </picture>
想根据设备像素比自动加载高清图但又不想写一堆 <source>
用 <img> 自身的 srcset + sizes 就够了，不需要 <picture>。浏览器会结合当前 DPR 和 sizes 描述的显示宽度，从 srcset 列表里挑最接近的资源。
常见误区：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
sizes不是固定值，而是“这张图在页面中大概占多宽”的提示，比如sizes="(max-width: 768px) 100vw, 50vw"表示：小屏占满视口，大屏占视口一半 -
srcset里的每个条目必须带宽度描述符（w）或像素密度描述符（x），混用会失效；例如"hero-400w.jpg 400w, hero-800w.jpg 800w" - 如果只写
x描述符（如1x, 2x），浏览器就无法响应视口变化，只按 DPR 切换 —— 这不是响应式，只是适配高清屏
<img
src="hero-800w.jpg"
srcset="hero-400w.jpg 400w,
hero-800w.jpg 800w,
hero-1200w.jpg 1200w"
sizes="(max-width: 768px) 100vw, 50vw"
alt="首页主图">
图片切换时有明显闪烁或重绘抖动
本质是浏览器加载新图前清空了旧图占位，又没预留空间。解决核心就两条：
- 给图片容器设明确宽高，或用
aspect-ratio（现代浏览器支持），避免布局偏移（CLS） - 所有
srcset或<source>中的图片保持相同宽高比，否则即使加了object-fit: cover也会因裁剪位置不同产生跳动感 - 慎用 JavaScript 动态切换
src—— 它绕过浏览器原生的预加载和缓存策略，容易触发二次加载；优先走 HTML 原生方案
简单补救：给 <img> 加 loading="lazy" 可减少首屏阻塞，但别对首屏大图加，反而拖慢展示。
需要兼容 IE 或老版本 Safari 怎么办
<picture> 在 IE 完全不支持，Safari 9+ 才开始支持。如果必须兼容 IE11，只能退回到 JS 方案，但得手动处理：
- 用
window.matchMedia()监听resize，但注意防抖，别每像素都触发 - 提前把各尺寸图片 URL 存进
data-属性，比如data-src-small="..." data-src-large="..." - 切换时先设置
img.src，再监听onload，成功后再更新 DOM，避免空白期
不过更实际的做法是：检查真实用户 UA 数据，如果 IE 占比低于 0.5%，直接不兼容 —— 硬塞 polyfill（如 picturefill）会增加首屏 JS 体积，得不偿失。
响应式图片真正的难点不在写法，而在图片资源的准备：尺寸、格式（WebP/AVIF）、压缩质量、CDN 缓存策略，这些没对齐，HTML 再规范也白搭。
