HTMLImageElement：width 属性

基线 广泛可用

此功能已得到良好建立，并且可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用： 2015 年 7 月.

width 属性是 HTMLImageElement 接口的一个属性，它指示如果图像正在绘制或呈现到任何可视介质（如屏幕或打印机），则图像绘制的宽度（以 CSS 像素 为单位）。否则，它是图像的自然宽度（已根据像素密度进行校正）。

值

一个整数，表示图像的宽度。宽度的定义方式取决于图像是否正在呈现到可视介质（如屏幕或打印机）。

  • 如果图像正在呈现到可视介质，则宽度以 CSS 像素 为单位表示。
  • 如果图像未呈现到可视介质，则其宽度使用图像的自然（固有）宽度表示，并根据 naturalWidth 指示的显示密度进行调整。

示例

在此示例中，使用 srcset 属性为时钟图像提供了两种不同的尺寸。一种宽度为 200px，另一种宽度为 400px。sizes 属性用于指定给定视口宽度的图像绘制宽度。

HTML

对于宽度不超过 400px 的视口，图像的宽度为 200px。否则，宽度为 400px。

html
<p>Image width: <span class="size">?</span>px (resize to update)</p>
<img
  src="/en-US/docs/Web/HTML/Element/img/clock-demo-200px.png"
  alt="Clock"
  srcset="
    /en-US/docs/Web/HTML/Element/img/clock-demo-200px.png 200w,
    /en-US/docs/Web/HTML/Element/img/clock-demo-400px.png 400w
  "
  sizes="(max-width: 400px) 200px, 400px" />

JavaScript

JavaScript 查看 width 属性以确定此时图像的宽度。这在窗口的 load 和 resize 事件处理程序中执行，以便始终提供最新的宽度信息。

js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");

const updateWidth = (event) => {
  output.innerText = clockImage.width;
};

window.addEventListener("load", updateWidth);
window.addEventListener("resize", updateWidth);

结果

此示例可能更容易在 单独的窗口中 试用。

规范

规范
HTML 标准
# dom-img-width-dev

浏览器兼容性

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

另请参阅