img元素srcset属性浅析
时间：|浏览：| 评论 ()
img srcset 属性
img 元素的 srcset 属性用于浏览器根据宽、高和像素密度来加载相应的图片资源。
属性格式：图片地址 宽度描述w 像素密度描述x，多个资源之间用逗号分隔。例如：
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />
上面的例子表示浏览器宽度达到 800px 则加载 middle.jpg ，达到 1400px 则加载 big.jpg。注意：像素密度描述只对固定宽度图片有效。
img 元素的 size 属性给浏览器提供一个预估的图片显示宽度。
属性格式：媒体查询 宽度描述（支持px），多条规则用逗号分隔。
<img src="images/gun.png" alt="img元素srcset属性浅析"
srcset="images/bg_star.jpg 1200w, images/share.jpg 800w, images/gun.png 320w"
sizes="(max-width: 320px) 300w, 1200w"/>
上面的例子表示浏览器视口为 320px 时图片宽度为 300px，其他情况为 1200px。
css image-set()
css属性image-set()支持根据用户分辨率适配图像。
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);
}
上述代码将会为普通屏幕使用 pic-1.jpg，为高分屏使用 pic-2.jpg，如果更高的分辨率则使用 pic-3.jpg，比如印刷。
下面示例：
<img height="356" sizes="(max-width: 760px) 100vw, 760px" data-src="http://www.vpsno.com/d/file/p/2021/03-04/93d63135f3cbd51691603451434afecb.png" data-srcset="https://a2put.chinaz.com/myfile//uploads/20210108/be67f3ff77260f3778d8b7acc073239d.jpg 1024w, https://www.idcspy.com/wp-content/uploads/2021/03/huaweiclou-300x140.png 300w, https://www.idcspy.com/wp-content/uploads/2021/03/huaweiclou-768x359.png 768w, https://www.idcspy.com/wp-content/uploads/2021/03/huaweiclou.png 1194w" width="760" uk-img>
热门教程
-
1.VPS是什么？
VPS就是在物理服务器中分割出多个虚拟分区，每个分区都拥有独立的操作系统、内存、磁盘和带宽，可以自主开机、关机、重启以及安装软件应用和配置环境等等，在使用体验上和一台真正的独立服务器没有区别。简而言之，VPS就是让你用更少的钱享受到和独立服务器相同的体验，以及比虚拟主机更多的硬件资源。
-
2.为什么要使用VPS？
如果你希望享受到比虚拟主机更多的功能和硬件资源配额，但是又无法承受独立服务器的高成本，那么VPS可能是你最理想的选择。通过选择“VPS”，可以以更低的成本享受到和一台真正的独立服务器同样的体验。如果需要更多资源，还可以在商家后台可以一键升级套餐。
-
3.哪里能找到便宜的VPS？
VPSNO一直致力于发布全球主机商的便宜VPS，包含便宜 Linux VPS、便宜 Windows VPS和独立服务器的最新促销信息。可以通过每天浏览本站或是订阅我们的RSS源，以确保您不会错过最优惠的价格。
