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 |
瀏覽器相容性
載入中…