css中background-image属性image-set()

css的image-set()函数表示法是一种让浏览器从给定集合中选择最合适的CSS图像的方法，主要用于高像素密度屏幕。分辨率和带宽因设备和网络访问而异。image-set()函数为用户的设备提供最合适的图像分辨率，提供一组图像选项（每个选项都有相关的分辨率声明），浏览器从中选择最适合设备和设置的图像。分辨率可以用作文件大小的代理-具有高分辨率屏幕的慢速移动连接上的用户代理可能更喜欢接收低分辨率图像，而不是等待加载高分辨率图像。image-set()允许作者提供选项，而不是确定每个用户需要什么。

语法

image-set是CSS4草案中的一个属性，目的就是保证图片在屏幕上的自适应。目前image-set只能使用webkit浏览器的私有属性“-webkit”。

image-set([ <image>| <string>])

取值：image-set()可以根据用户设备的分辨率匹配合适的图像。为不同的设备分配合适得图像。

示例

image-set可以保证图片在不同分辨率设备上的适配，能根据不同的设备类型展示不同的图片，看下面的例子

background-image: -webkit-image-set(url(./bg1x.png) 1x , url(./bg2x.png) 2x);

这段例子意思就是在1倍屏上显示bg1x.png，在2倍屏上显示 bg2x.png 。兼容性上，目前最新主流的浏览器都已支持，对于不支持的设备可以在使用这个函数前使用background：url()来进行兼容。

实际运用

一般在实际运用时，会和background一起用，如下：

selector {
  background-image: url(no-image-set.png);
  background: image-set(url(foo-lowres.png) 1x,url(foo-highres.png) 2x) center;
}

类似于不同的文本，图像也会显示成不同的：

不支持image-set：在不支持image-set的浏览器下，他会支持background-image图像，也就是说不支持image-set的浏览器下，他们解析background-image中的背景图像；
支持image-set：如果你的浏览器支持image-sete，而且是普通显屏下，此时浏览器会选择image-set中的@1x背景图像；
Retina屏幕下的image-set：如果你的浏览器支持image-set，而且是在Retina屏幕下，此时浏览器会选择image-set中的@2x背景图像。

关于srcset

查阅image-set时，也顺便翻看到了srcset属性，img的srcset属性方便的解决了页面图片适应不同屏幕密度的情况。目前除了IE没有兼容到，已经全部都兼容了，可以放心使用。这个属性也就弥补了image-set只能在background使用的问题。

srcset这个属性用于：以最合适的src去匹配不同屏幕（高分屏低分屏如Retina；大屏小屏）

示例用法如下：

<img src="mm-width-128px.jpg" srcset="mm-width-128px.jpg 1x, mm-width-256px 2x">
当然，我们也可以简写成：
<img src="mm-width-128px.jpg" srcset="mm-width-256px 2x">

新标准

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片的话，太麻烦了。所以就有了新的srcset标准。代码如下

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">


<img src="image-128.png"
  srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
  sizes="(max-width: 360px) 340px, 128px" />

1x、2x 表示目标屏幕的像素密度；400w、600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。

对于srcset里面出现了一个w单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用，当然，浏览器会自动选择一个最大的可用图片。

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

上面例子中的sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

注意，这里所有的值都是指宽度值，且单位任意，em, px, cm, vw, ...都是可以的，甚至可以CSS3的calc计算，例如：

sizes="(max-width: 360px) calc(100vw - 20px), 128px"

表示当视区宽度不大于360像素时候，图片宽度为整个视区宽度减去20像素的大小。关于srcset的更多内容，请点击：img标签的srcset属性。

链接: https://www.fly63.com/article/detial/11664