最可靠方案是max-width: 100%; height: auto;，前提是父容器有可计算宽度且无干扰；width: 100%会强制撑满导致变形，而object-fit仅适用于固定尺寸容器内控制缩放方式。
picture 标签本身不响应 CSS 尺寸变化，但必须和 CSS 协作才能真正实现响应式图片 —— 否则再全的
为什么加了 width:100% 还是拉伸变形
单纯给 <img> 设置 width: 100% 不够，<picture></picture> 容器默认是 inline 元素，没有块级约束，且不继承父容器宽高比。浏览器会按原始尺寸渲染 <img>，再强行缩放，导致模糊或拉伸。
- 必须同时写
max-width: 100%+height: auto，否则高宽比失控 - 如果父容器是
flex或grid项，要检查是否被min-width: auto（Chrome 默认）卡住收缩 -
<figure></figure>包裹<picture></picture>不等于自动响应 —— 它只是语义容器，仍需显式加aspect-ratio或width/height - 旧版 Safari 需加
-webkit-aspect-ratio，且不能和height同时设，否则失效
如何用 CSS 控制不同主题下的图片切换
<picture></picture> 的 media 属性不识别节日、品牌色等自定义状态，它只响应系统级媒体特性（如 prefers-color-scheme、视口宽度）。节日换肤必须靠 JS + CSS 显隐控制，而非依赖 <source></source> 自动匹配。
- 推荐做法：预置多组
<picture class="theme-default"></picture>、<picture class="theme-christmas"></picture>，用外层容器 class（如body.theme-christmas）配合 CSS 显隐切换 - 不要试图用
:has()或:not()动态影响<source></source>加载 —— 兼容性差，且浏览器早已完成资源选择 - 若用 JS 动态改
<img>的src，务必同步更新alt和保留loading="lazy"，避免可访问性降级 - 所有节日图应保持相同宽高比，否则 CSS
aspect-ratio会失效，引发 layout shift
为什么 sizes 写在 里完全没用
sizes 是 <img> 的专属属性，只在它身上生效。写在 <source></source> 里会被浏览器直接忽略 —— 这是规范明确规定的，不是 bug。
-
sizes="(max-width: 480px) 100vw, 50vw"必须出现在<img>标签上，且要和srcset中的w描述符配对使用 - 如果只用
x描述符（如photo.jpg 2x），sizes反而会禁用 DPR 匹配逻辑，导致高清屏加载错图 -
<source></source>的srcset里写2x是无效的 —— 它只看media匹配结果，然后把第一个满足条件的srcset值交给<img>去做密度决策 - 常见错误：
<source sizes="100vw"></source>→ 完全无效果，资源加载不受影响
深色模式下图片怎么不靠滤镜也能适配
用 filter: invert(1) 或 contrast() 强行反转图片，会损失细节、破坏文字可读性，且无法通过无障碍检测。正确方式是用 <source></source> 的 media="(prefers-color-scheme: dark)" 提供专色优化图源。
- 必须把深色版图放在支持该媒体查询的
<source></source>中，且顺序要靠前（浏览器短路匹配） - 示例：
<source media="(prefers-color-scheme: dark)" srcset="hero-dark.avif"></source>，后面跟普通版<source></source>和兜底<img> - 搭配
@media (prefers-reduced-motion)提供静态替代图，不是可选项，而是 WCAG 2.1 AA 级要求 - 注意：Safari on iOS 要求视频类 PiP 图也走同样路径，不能只靠 JS 切换
src
真正容易被忽略的是：浏览器在解析 <picture></picture> 时，<source></source> 匹配发生在 DOM 构建阶段，而 CSS 类变更、JS 修改属性都发生在之后 —— 所以任何“运行时动态影响 <source></source> 选择”的想法，从底层机制上就不可行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
