HTMLImageElement: sizes 屬性
HTMLImageElement 屬性 sizes 允許您為一組媒體條件中的 影像指定佈局寬度。這提供了在文件狀態發生變化以匹配不同媒體條件時，自動選擇不同影像（甚至不同方向或縱橫比的影像）的能力。
每個條件都使用 媒體查詢使用的相同條件格式指定。
值
一個字串，包含逗號分隔的源大小描述符列表，後跟一個可選的備用大小。每個源大小描述符由媒體條件組成，然後是至少一個空格字元，然後是當媒體條件評估為 true 時要用於影像的源大小值。您可以使用值 auto 來替換整個大小列表或列表中的第一個條目。有關 sizes 屬性語法的更多資訊，請參閱 <img>。
示例
選擇適合視窗寬度的影像
在此示例中，建立了一個類似部落格的佈局，顯示了一些文字和一個影像，該影像根據視窗的寬度指定了三個大小點。還提供了影像的三個版本，並指定了它們的寬度。瀏覽器會獲取所有這些資訊，並選擇一個最能滿足指定值的影像和寬度。
影像的確切使用方式可能取決於瀏覽器和使用者顯示器的畫素密度。
示例底部的按鈕可以讓您實際修改 sizes 屬性，在 40em 和 50em 之間切換影像的最大三個寬度。
HTML
html
<article>
<h1>An amazing headline</h1>
<div class="test"></div>
<p>
This is even more amazing content text. It's really spectacular. And
fascinating. Oh, it's also clever and witty. Award-winning stuff, I'm sure.
</p>
<img
src="new-york-skyline-wide.jpg"
srcset="
new-york-skyline-wide.jpg 3724w,
new-york-skyline-4by3.jpg 1961w,
new-york-skyline-tall.jpg 1060w
"
sizes="(50em <= width <= 60em) 50em,
(30em <= width < 50em) 30em,
(width < 30em) 20em"
alt="The New York City skyline on a beautiful day, with the One World Trade Center building in the middle." />
<p>
Then there's even more amazing stuff to say down here. Can you believe it? I
sure can't.
</p>
<button id="break40">Last Width: 40em</button>
<button id="break50">Last Width: 50em</button>
</article>
CSS
css
article {
margin: 1em;
max-width: 60em;
min-width: 20em;
border: 4em solid #880e4f;
border-radius: 7em;
padding: 1.5em;
font:
16px "Open Sans",
"Verdana",
"Helvetica",
"Arial",
sans-serif;
}
article img {
display: block;
max-width: 100%;
border: 1px solid #888888;
box-shadow: 0 0.5em 0.3em #888888;
margin-bottom: 1.25em;
}
JavaScript
JavaScript 程式碼處理了兩個按鈕，它們允許您在 40em 和 50em 之間切換第三個寬度選項；這是透過處理 click 事件來完成的，使用 JavaScript 字串 replace() 方法替換 sizes 字串的相關部分。
js
const image = document.querySelector("article img");
const break40 = document.getElementById("break40");
const break50 = document.getElementById("break50");
break40.addEventListener(
"click",
() => (image.sizes = image.sizes.replace(/50em,/, "40em,")),
);
break50.addEventListener(
"click",
() => (image.sizes = image.sizes.replace(/40em,/, "50em,")),
);
結果
最好在 自己的視窗中檢視此頁面，以便您可以完全調整大小。
規範
| 規範 |
|---|
| HTML # dom-img-sizes |
瀏覽器相容性
載入中…