如何设置picture元素中图片的尺寸？HTML新手技术求助

1. 尺寸属性必须作用于嵌套的img元素 #

picture只是多源图片的选择容器，实际渲染的是内部的img标签，所以width和height属性要直接加在img上，而非picture元素：

<picture>
  <source srcset="large-image.jpg" media="(min-width: 900px)">
  <source srcset="medium-image.jpg" media="(min-width: 600px)">
  <!-- 尺寸属性加在img标签上 -->
  <img src="small-image.jpg" alt="描述图片内容" width="700" height="450">
</picture>

2. 检查CSS是否覆盖了尺寸设置 #

如果给img加了width/height仍不生效，大概率是CSS规则强制覆盖了这些属性。比如常见的全局响应式样式：

img {
  width: 100% !important;
  height: auto !important;
}

解决方法是给目标img加专属类名，用更具体的选择器指定尺寸：

.picture-target-img {
  width: 700px;
  height: 450px;
  /* 可选：用object-fit保持图片比例，避免拉伸变形 */
  object-fit: cover;
}

对应HTML：

<img src="small-image.jpg" alt="描述图片内容" class="picture-target-img">

3. 正确理解sizes属性的作用 #

sizes不是直接设置渲染尺寸的属性，它的作用是告诉浏览器不同视口下图片的显示空间占比，帮助浏览器从srcset中挑选最合适的资源。比如：

<picture>
  <source 
    srcset="large.jpg 1200w, medium.jpg 800w, small.jpg 400w"
    sizes="(min-width: 900px) 80vw, (min-width: 600px) 90vw, 100vw"
  >
  <img src="small.jpg" alt="描述图片内容" width="700" height="450">
</picture>

这里sizes定义了不同视口下图片的空间占比，但最终渲染的基础尺寸还是由img的width/height或CSS控制。

内容的提问来源于stack exchange，提问作者Marvelous Dele