HTMLImageElement: свойство width

Свойство width интерфейса HTMLImageElement указывает на ширину изображения в CSS пикселях, если оно отображается или рендерится на любом визуальном носителе, таком как экран или принтер. В противном случае, это естественная ширина изображения, скорректированная с учётом плотности пикселей.

Целочисленное значение, указывающее ширину изображения. Способ определения ширины зависит от того, рендерится ли изображение на визуальном носителе, таком как экран или принтер:

• Если изображение рендерится на визуальном носителе, ширина выражается в CSS пикселях.
• Если изображение не рендерится на визуальном носителе, его ширина представляет собой естественную (внутреннюю) ширину изображения, скорректированную с учётом плотности отображения, как указано в naturalWidth.

В этом примере для изображения часов с помощью атрибута srcset предоставлены два разных размера. Один имеет ширину 200px, а другой — 400px. Атрибут sizes используется для указания ширины изображения, которая должна отображаться в зависимости от ширины области просмотра.

Для областей просмотра шириной до 400px изображение отображается с шириной 200px. В противном случае оно отображается с шириной 400px.

<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 обращается к свойству width для определения ширины изображения в данный момент. Это выполняется в обработчиках событий load и resize окна, чтобы всегда была доступна самая актуальная информация о ширине.

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);

Этот пример можно проще попробовать в отдельном окне.

• HTMLCanvasElement.width
• HTMLEmbedElement.width
• HTMLIFrameElement.width
• HTMLObjectElement.width
• HTMLSourceElement.width
• HTMLVideoElement.width