HTMLSourceElement：width 属性

width 是 HTMLSourceElement 接口的一个非负数属性，它以 CSS 像素为单位指示图像资源的宽度。

只有当当前 <source> 元素的父元素为 <picture> 元素时，此属性才会生效。

它反映了 <source> 元素的 width 属性。

值

一个非负数，以 CSS 像素为单位指示图像资源的宽度。

示例

html
<picture id="img">
  <source
    srcset="landscape.png"
    media="(min-width: 1000px)"
    width="1000"
    height="400" />
  <source
    srcset="square.png"
    media="(min-width: 800px)"
    width="800"
    height="800" />
  <source
    srcset="portrait.png"
    media="(min-width: 600px)"
    width="600"
    height="800" />
  <img
    src="fallback.png"
    alt="Image used when the browser does not support the sources"
    width="500"
    height="400" />
</picture>
js
const img = document.getElementById("img");
const sources = img.querySelectorAll("source");
console.log(Array.from(sources).map((el) => el.width)); // Output: [1000, 800, 600]

规范

规范
HTML 标准
# dom-dim-width

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅