分辨率切换: 相同的尺寸, 不同的分辨率
如果你支持多种分辨率显示，但希望每个人在屏幕上看到的图片的实际尺寸是相同的，你可以让浏览器通过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
