分辨率切換: 相同的尺寸, 不同的分辨率
如果你支持多種分辨率顯示，但希望每個人在屏幕上看到的圖片的實際尺寸是相同的，你可以讓瀏覽器通過srcset和x語法結合。
<img srcset="elva-fairy-320w.jpg,elva-fairy-480w.jpg 1.5x,elva-fairy-640w.jpg 2x"src="elva-fairy-640w.jpg" alt="">
分辨率切換：不同的尺寸
<picture>
HTML<picture> 元素通過包含零或多個 <source> 元素和一個 <img> 元素來為不同的顯示/設備場景提供圖像版本。瀏覽器會選擇最匹配的子 <source> 元素，如果沒有匹配的，就選擇 <img> 元素的 src 屬性中的URL。然后，所選圖像呈現在<img>元素占據的空間中。
<picture><source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg"><source media="(min-width: 800px)" srcset="elva-800w.jpg"><img src="elva-800w.jpg" alt=""></picture>
第一個條件返回真，那么就會顯示這張圖片。
srcset
srcset定義了我們允許瀏覽器選擇的圖像集，以及每個圖像的大小。
sizes定義了一組媒體條件（例如屏幕寬度）并且指明當某些媒體條件為真時，什么樣的圖片尺寸是最佳選擇—我們在之前已經討論了一些提示。
<img src="128px.jpg"srcset="128px.jpg 128w, 256px.jpg 256w, 514px.jpg 512w"sizes="(max-width: 360px) 340px, 128px">
<img src="128px.jpg"srcset="128px.jpg 128w, 256px.jpg 256w, 514px.jpg 512w"sizes="(max-width: 360px) calc(100vw - 20px), 128px">
當<img>元素的寬度規格為128的時候，加載128px.jpg，寬度規格為256的時候，加載256px.jpg， 寬度規格為512的時候，加載514px.jpg。
這里的寬度規格就是w描述符的另外一種理解，其與sizes屬性設定和屏幕密度密切相關。
假設屏幕密度是2的iPhone6手機，sizes屬性計算值是128px，則此時<img>實際的寬度規格應該是128*2也就是256w，因此會加載256px.jpg這張圖。
sizes屬性值(max-width: 360px) 340px, 128px表示當視區寬度不大于360像素時候，圖片的寬度限制為340像素；其他情況下，使用128像素。
sizes屬性值(max-width: 360px) calc(100vw - 20px), 128px表示當視區寬度不大于360像素時候，圖片的寬度限制為屏幕寬度減20像素；其他情況下，使用128像素。
<picture><sourcemedia=”(max-width: 800px)“srcset=”f1-focused-800.jpg 800w, f1-focused-1406.jpg 1406w“sizes=”(min-width: 530px) calc(100vw – 96px), 100vw“><img alt=”“src=”f1-689.jpg“srcset=”f1-689.jpg 689w, f1-1378.jpg 1378w, f1-500.jpg 500w, f1-1000.jpg 1000w“sizes=”(min-width: 1066px) 689px, calc(75vw – 137px)“></picture>
引用SVG
<img src="equilateral.png" alt="triangle with equal sides" srcset="equilateral.svg">
對于不支持SVG（IE 8及更低版本，Android 2.3及更低版本）的瀏覽器，您可以從src屬性引用PNG或JPG，并使用srcset屬性只有最近的瀏覽器才能識別）來引用SVG。
背景圖中使用
background: url("fallback.png") no-repeat center;background-image: url("image.svg");background-size: contain;
該文章在 2026/3/23 18:10:43 編輯過
400 186 1886
