HTMLImageElement: width 属性
HTMLImageElement 接口的 width 属性表示如果图像正在被绘制或渲染到任何视觉介质（如屏幕或打印机）时，它以 CSS 像素 为单位的绘制宽度。否则，它表示图像的自然、经像素密度校正后的宽度。
值
一个表示图像宽度的整数值。宽度的定义方式取决于图像是否被渲染到视觉介质（如屏幕或打印机）。
- 如果图像正在被渲染到视觉介质，则宽度以 CSS 像素 表示。
- 如果图像未被渲染到视觉介质，则其宽度使用图像的自然（固有）宽度表示，并根据
naturalWidth指定的显示密度进行调整。
示例
在此示例中，使用 srcset 属性为时钟图像提供了两种不同的尺寸。一种是 200 像素宽，另一种是 400 像素宽。 sizes 属性用于指定给定视口宽度时应绘制图像的宽度。
HTML
对于宽度不超过 400 像素的视口，图像以 200 像素的宽度绘制。否则，以 400 像素绘制。
html
<p>Image width: <span class="size">?</span>px (resize to update)</p>
<img
src="/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png"
alt="Clock"
srcset="
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-200px.png 200w,
/en-US/docs/Web/HTML/Reference/Elements/img/clock-demo-400px.png 400w
"
sizes="(width <= 400px) 200px, 400px" />
JavaScript
JavaScript 在此刻查看 width 属性来确定图像的宽度。这在窗口的 load 和 resize 事件处理程序中执行，以便始终可以获得最新的宽度信息。
js
const clockImage = document.querySelector("img");
let output = document.querySelector(".size");
const updateWidth = () => {
output.innerText = clockImage.width;
};
updateWidth();
window.addEventListener("resize", updateWidth);
结果
此示例可能在 自己的窗口中 尝试起来更容易。
规范
| 规范 |
|---|
| HTML # dom-img-width-dev |
浏览器兼容性
加载中…