<picture>标签本身不接受CSS width/height控制，因其会破坏响应式逻辑；应通过容器层约束尺寸并用object-fit和object-position控制填充与裁切。
picture标签本身不接受CSS width/height控制？
不是不能，而是直接设width或height会破坏<picture>的响应式逻辑——浏览器仍按<source>里的media或srcset规则选图，但渲染时强行拉伸，导致模糊或裁剪错位。
真正可控的是容器层：把<picture>包进一个带尺寸约束的<div>，再用object-fit控制图片如何填充。
- 用
object-fit: cover保持宽高比、裁切溢出（适合头图、卡片） - 用
object-fit: contain完整显示、留白（适合图标、logo） - 务必加
object-position指定裁切锚点，比如object-position: center top避免人脸被切掉
为什么img放在picture里还报“Missing fallback image”？
<picture>必须以<img>结尾，且这个<img>要有src和alt——它不是可选后备，而是必需的降级载体。浏览器不支持<picture>（如旧版IE）或所有<source>都不匹配时，就靠它撑住。
-
<img>的src应指向最通用的格式（如.jpg），不要写srcset - 别把
<img>写成自闭合：<img src="..." alt="..." />在HTML中无效，必须闭合为<img src="..." alt="..."> - 如果只想要WebP+AVIF，fallback的
<img>仍得提供JPG/PNG，否则旧设备白屏
CSS media query和picture的media属性冲突吗？
不冲突，但分工不同：CSS的@media控制“页面怎么布局”，<source>的media控制“该加载哪张图”。两者叠加时，浏览器先按<source>选源，再按CSS决定最终渲染尺寸。
立即学习“前端免费学习笔记（深入）”；
典型陷阱是CSS写了max-width: 100%但忘了height: auto，导致图片高度塌陷；或者在Flex/Grid容器里没设align-items: stretch，让<picture>高度丢失。
-
<source media="(min-width: 768px)" srcset="large.jpg 1x, large@2x.jpg 2x">—— 这里media只管加载时机 - CSS中对应写
@media (min-width: 768px) { .hero-img { width: 80%; } }—— 这里才管最终占位 - 两套规则独立生效，但最终渲染效果是叠加结果
用CSS变量动态切换picture的图片源？
不能。CSS变量无法注入<source>的srcset或media属性——这些是HTML属性，解析早于CSS计算，且不响应CSS变更。
真要动态换图，只能用JS操作DOM：document.querySelector('source').srcset = 'new.jpg'，但注意这会触发重新下载，且可能破坏浏览器预加载逻辑。
- 服务端渲染场景下，优先用
<picture>+ 后端模板变量（如Jinja的{{ img_webp }}） - 客户端动态场景，改用
<img>+srcset+ JS监听resize或matchMedia更稳妥 - 强行用CSS变量+
attr()尝试读取？content: attr(data-src)只对伪元素有效，且不能触发图片加载
核心就一点：<picture>是声明式资源选择，不是CSS样式开关。想让它活起来，得从HTML结构或JS驱动入手，别指望CSS单挑。
