image的srcset属性

yzzz 发布于2019-08-01 14:59 / 3220人阅读

摘要：所以就有了新的标准。代码如下其中指定图片的地址和对应的图片质量。语法如下上面例子中的就是指默认显示如果视区宽度大于则显示。总结的属性方便的解决了页面图片适应不同屏幕密度的情况。

介绍

响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下，image自动加载不同的图片。用法如下：

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

新标准

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

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。
对于srcset里面出现了一个w单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用，当然，浏览器会自动选择一个最小的可用图片。
sizes语法如下：

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

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

总结

img的srcset属性方便的解决了页面图片适应不同屏幕密度的情况。目前除了IE没有兼容到，已经全部都兼容了，可以放心使用。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/49694.html

图片懒加载的前世今生

摘要：配置项配置项中的参数有以下三个所监听对象的具体祖先元素，默认是计算交叉状态时，将附加到祖先元素上，从而有效的扩大或者缩小祖先元素判定区域设置一系列的阈值，当交叉状态达到阈值时，会触发回调函数。一、前言通常情况下，HTML 中的图片资源会自上而下依次加载，而部分图片只有在用户向下滚动页面的场景下才能被看见，否则这部分图片的流量就白白浪费了。所以，对于那些含有大量图片资源的网...

zhaot 2019-08-23 16:13 评论0 收藏0
(译)响应式图片— srcset 和 sizes 属性

摘要：在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。元素展示了很多改变这个局面的希望，但无论元素是否可以完全使用，现在有两个对于响应式图片很关键的两个属性和。在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。直到最近，根据不同的屏幕尺寸和像素密度来提供不同的图片还是没有完全实现。元素展示了很多改变这个局面的希望，但无论picture元素是否可以完全使用，现在有两个...

stefanieliang 2019-08-30 12:46 评论0 收藏0
(译)响应式图片— srcset 和 sizes 属性

摘要：在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。元素展示了很多改变这个局面的希望，但无论元素是否可以完全使用，现在有两个对于响应式图片很关键的两个属性和。在响应式网页设计的革命中，图片看起来是被浪潮落下的一个事物。直到最近，根据不同的屏幕尺寸和像素密度来提供不同的图片还是没有完全实现。元素展示了很多改变这个局面的希望，但无论picture元素是否可以完全使用，现在有两个...

alogy 2019-08-01 15:04 评论0 收藏0