是纯逻辑容器，无渲染盒，不支持width/height属性；尺寸控制必须作用于其内部元素，通过HTML属性或CSS（如max-width:100%; height:auto）实现。
<picture></picture> 本身不改尺寸，它只管“选哪张图”——尺寸控制仍得靠 <img alt="怎么用HTML中的picture改尺寸" > 上的 CSS 或 HTML 属性。
为什么给 <picture></picture> 加 width/height 没用
<picture></picture> 是个容器标签，没有渲染盒（rendering box），浏览器不会为它计算宽高。你写 <picture width="300"></picture> 或 style="width: 300px"，完全被忽略。真正决定显示尺寸的，永远是它内部那个 <img alt="怎么用HTML中的picture改尺寸" > 元素。
- 常见错误：在
<picture></picture>上写class="w-100"或style="max-width: 500px"，结果图片该溢出还溢出 - 正确做法：所有尺寸逻辑（
max-width、height: auto、object-fit）必须落在<img alt="怎么用HTML中的picture改尺寸" >标签上 - 例外情况：只有当你用
<picture></picture>配合display: contents（极少见）时才可能影响布局流，但那已超出常规使用范畴
<img alt="怎么用HTML中的picture改尺寸" > 在 <picture></picture> 里怎么设尺寸才安全
和单独用 <img alt="怎么用HTML中的picture改尺寸" > 一样，最稳组合仍是：max-width: 100% + height: auto。但要注意两个隐藏陷阱：
- 父容器必须有明确宽度参照（比如
div没设width又没内容撑开，max-width: 100%就等于 0） - 如果
<img alt="怎么用HTML中的picture改尺寸" >在 Flex 容器里，必须同时给直接父容器加min-width: 0，否则max-width: 100%失效（这是 Flex 规范行为，不是 bug） - 不要在
<img alt="怎么用HTML中的picture改尺寸" >上同时写 HTMLwidth/height属性和 CSSwidth/height，前者会强制固定像素，破坏响应式
示例写法：
<picture> <source media="(min-width: 768px)" srcset="hero-lg.jpg"> <source srcset="hero-sm.jpg"> <img src="hero-fallback.jpg" alt="封面" style="max-width:90%"> </picture>
sizes 和 srcset 不是尺寸控制，别混淆
sizes 告诉浏览器“这张图在页面中大概占多宽”，用于配合 srcset 中的 w 描述符做资源选择；它不改变图片实际显示大小。如果你写了 sizes="50vw" 却没配 srcset，或者写了 srcset 却漏掉 sizes（当用 w 描述符时），浏览器照样按 <img alt="怎么用HTML中的picture改尺寸" > 的 CSS 渲染尺寸——只是可能加载了错的分辨率资源。
立即学习“前端免费学习笔记（深入）”；
- 典型错误：以为
sizes="(max-width: 480px) 100vw, 50vw"能让图片小屏变宽、大屏变窄 —— 它只影响下载哪张图，不影响 layout - 验证方法：打开 DevTools → Network，看加载的是
hero-400w.jpg还是hero-800w.jpg，再切到 Elements 查<img alt="怎么用HTML中的picture改尺寸" >的 computed width - 如果目标是“让图随视口缩放”，该用
width: 100vw或max-width: 100%，而不是依赖sizes
想裁剪或填充？object-fit 必须作用于 <img alt="怎么用HTML中的picture改尺寸" >，且容器要定宽高
object-fit: cover 或 contain 只在 <img alt="怎么用HTML中的picture改尺寸" > 的父容器显式设置了 width 和 height 时才生效。把 object-fit 直接写在 <picture></picture> 上无效，写在 <img alt="怎么用HTML中的picture改尺寸" > 上但父容器没定尺寸也白搭。
- 适用场景：头像、卡片封面、轮播图容器 —— 这些地方容器尺寸固定，
object-fit才能起作用 - 移动端兼容：iOS Safari ≤12.5 需加
-webkit-object-fit: cover；IE 完全不支持，fallback 方案只能用background-image - 注意：一旦用了
object-fit，height: auto就失效了，因为高度由容器决定，不是按比例算出来的
真正容易被忽略的一点：很多人花时间调 <picture></picture> 结构，却忘了最终渲染尺寸只取决于 <img alt="怎么用HTML中的picture改尺寸" > 的样式和它的父容器约束。把精力放在容器宽度来源、Flex/Grid 行为、以及 object-fit 的前提条件上，比折腾 <picture></picture> 本身有效得多。
