【20190305】CSS-响应式图片：srcset+sizes，picture，svg

时间 2019-11-09

标签 css 响应图片 srcset+sizes srcset sizes picture svg 栏目 CSS 繁體版

原文原文链接

响应式图片能够根据不一样的设备屏幕大小从而选择加载不一样的图片，从而节省带宽。实现响应式图片有三种方法：srcset+sizes属性、picture标签、svgcss

1. srcset+sizes

srcset是img标签的一个属性，它能够提供一系列图片源，供浏览器在不一样设备屏幕大小和像素密度下选择适合的图片。W3C规范中的描述：srcset属性容许做者根据不一样分辨率或不一样视窗尺寸提供多个不一样分辨率图像。用户代理会根据以前获取的任何资源作选择，从而避免多个资源加载浪费带宽和相关性能问题。html

使用语法以下：web

1 <img src="selina.jpg" alt="alt"
2      srcset="100-s1.jpg 100w,300-s1.jpg 300w,600-s2.jpg 600w,800-s2.jpg 800w"
3      sizes="(max-width:500px) 300px,(max-width:1000px) 500px,100vw"/> 
4 
5 <img src="selina.jpg" alt="alt"
6      srcset="100-s1.jpg 1x,600-s2.jpg 2x" />

其中sizes的媒体条件中的px可替换成rem、em等相对单位，或vw相对于视口的百分比大小。chrome

srcset中提供了一系列图片源，每一个资源之间用逗号隔开，资源由图片的url与显示条件构成。浏览器

以w结尾表示条件为像素，如第一条语句中表示100-s1的固定宽度为100像素，当设备视口宽度小于等于100px时选择100-s1图片，当设备视口宽度小于等于300px时选择300-s1图片。
以x结尾表示条件为像素密度，第二条语句表示当设备像素密度为1时选择100-s1图片，当设备像素密度为2时选择600-s2图片。

第一条语句中的sizes属性是为响应式图片设置的断点，它表示怎样根据视口宽度来选择图片，若是不设置sizes，那么它默认的是100vw，也就是永远根据100%视口宽度来选择图片源。sizes属性值通常由一系列媒体条件构成，媒体条件后跟一个该条件下的图片预估宽度，每一个条件以逗号隔开，最后没有媒体条件的预估宽度表示默认值。svg

第一条语句中的sizes表示当设备视口宽度小于等于500px时，当前预估图片尺寸为300px，那么浏览器将会在图片源中查找符合条件的图片，而且查找的原则首先是图片固定宽度应该大于等于预估宽度，而后图片宽度是最接近预估宽度的。当媒体条件都不知足时，就采用默认值100vw，也就是将100%视口宽度做为预估宽度来选择图片。工具

另外因为浏览器验证媒体条件时若是第一个条件为真，那么就会中止验证，所以媒体条件的顺序也应该按照从小到大的规律排列，不然后面的小范围条件将会不起做用。性能

目前大多数浏览器都支持srcset属性，可是我本身测试的在chrome 72.0上的显示效果很奇怪，没搞懂怎么回事。测试

W3C规范是这样描述 srcset: srcset属性容许做者根据不一样分辨率或不一样的视窗尺寸提多个不一样分辨图像。用户代理会根据以前获取的任何资源作选择，从而避免多个资源加载浪费带宽和相关性能问题著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/responsive/responsive-images-part-1-using-srcset.html © w3cplus.com

W3C规范是这样描述 srcset: srcset属性容许做者根据不一样分辨率或不一样的视窗尺寸提多个不一样分辨图像。用户代理会根据以前获取的任何资源作选择，从而避免多个资源加载浪费带宽和相关性能问题。著做权归做者全部。
商业转载请联系做者得到受权,非商业转载请注明出处。
原文: https://www.w3cplus.com/responsive/responsive-images-part-1-using-srcset.html © w3cplus.com

2. picture标签

picture元素是HTML5的新特性，它容许你放置多个source标签，指定不一样的图像文件名，根据媒体条件（视口高度viewport height、宽度width、方向orientation）或像素密度来选择图片进行加载。url

使用语法以下：

 1 <picture>
 2       <source media="max-width:800px"
 3  
 4             srcset="image800.jpg 800w,
 5                     image1406.jpg 1406w
 6             "
 7  
 8             sizes="(min-width:530px) calc(100vw - 96px),
 9                    100vw"
10        >
11  
12        <img alt="aaa"
13           src="689.jpg"
14  
15           srcset="689.jpg 689w,
16                   1378.jpg 1378w,
17                   500.jpg 500w
18                   1000.jpg 1000w"
19  
20          size="(min-width:1066px) 689px
21                 calc(75vw - 137px)"
22        >
23   </picture>

当符合source标签中的media条件时，选择source中的图片源，不然使用img中的图片源。

picture元素内部的source与img的关系像是相片与相框的关系，相框带有一个底图，当你有不少不一样尺寸的图片时，你试图找到第一个合适尺寸的照片放到相框里，若是没有，就不放照片而用相框自己的底图，picture就是告诉你这个相框只能在这些图片里找合适的。

另外还支持选择不一样格式的图片：

1 <picture>
2        <source type="image/webpp" srcset="snow.webp">
3        <img src="snow.jpg" alt="a cat">
4 </picture>

若是浏览器支持webp格式，则加载snow.webp，不然加载jpg图片。

目前大多数浏览器也已支持picture，若是有特殊状况，可使用picturefill工具来兼容各个浏览器。

3. svg

经过img标签插入svg矢量图也能够达到实现响应式图片的效果，可是这种方法不能用JavaScript来操做图像，并且只能使用内联css样式来控制图像，也不能使用css伪类。

或直接在HTML中插入svg代码，svg代码应该包含在<svg></svg>中。

最后能够经过iframe嵌入svg文档。

具体可参考：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web