本文共 1654 字，大约阅读时间需要 5 分钟。

：

image-set() = image-set( 
   
    # )
    
      = [ 
      | 
     
       ] 
      
     
    
   

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

div {	background-image: -webkit-image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );    background-image: image-set( "test.png" 1x, "test-2x.png" 2x, "test-print.png" 600dpi );}//上述代码将会为普通屏幕使用 test.png，为高分屏使用 test-2x.png，如果更高的分辨率则使用 test-print.png，比如印刷//------------或者url------------------body {    background-image: -webkit-image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);    background-image:         image-set( url(../images/pic-1.jpg) 1x, url(../images/pic-2.jpg) 2x, url(../images/pic-3.jpg) 600dpi);}

兼容性：

需要注意的是，目前这些浏览器支持的语法是：image-set( <url> | <string> )，写法如下

div {	background-image: image-set( url(test.png) 1x, url(test-2x.png) 2x );}

css image-set 让浏览器自动切换1x，2x图片

方法一：方法二：background-image: url(img.jpg');background-image:image-set( url(img.jpg) 1x, url(img@2x.jpg) 2x );

操作实例代码

 样式

.image-set-by-zxx {	width: 128px;	height: 96px;	background: url(../images/image-set-not.jpg);	background: -webkit-image-set(url(../images/128px1x.jpg) 1x, url(../images/256px2x.jpg) 2x, url(../images/512px3x.jpg) 3x);	background: image-set(url(../images/128px1x.jpg) 1x, url(../images/256px2x.jpg) 2x, url(../images/512px3x.jpg) 3x);	background-size: cover;}

img srcset 属性

img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。

属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。

上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效

img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。

属性格式：媒体查询 宽度描述（支持px），多条规则用逗号分隔

上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px

转载地址：https://jackiehao.blog.csdn.net/article/details/113850806 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！