介绍

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

<img src="data:image-128.png" srcset="image-256.png 2x" />

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

新标准

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

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

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

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

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

总结

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

image的srcset属性相关推荐

响应式图片（srcset属性和picture元素）
自适应网页设计意味着,不仅我们的布局能根据设备特性而变化,内容也可以.例如,高分辨率 (2x) 显示屏上高分辨率图形可保证清晰度.当浏览器宽度为 800px 时,一张 50% 宽度的图像或许很适合,但 ...
img元素srcset属性浅析
img srcset 属性 img 元素的 srcset 属性用于浏览器根据宽.高和像素密度来加载相应的图片资源. 属性格式:图片地址宽度描述w 像素密度描述x,多个资源之间用逗号分隔.例如: &l ...
HTML 里 img 元素的 src 和 srcset 属性有何区别？
在 HTML 中,img 元素通常用于在网页中插入图片.img 元素有两个相关的属性:src 和 srcset. src 属性指定图像的 URL,它是必需的.浏览器将使用该 URL 加载图像并将其显示 ...
img标签中的srcset属性有什么用？
我的博客https://blog.ideaopen.cn/ img元素的srcset属性用于浏览器根据宽.高和像素密度来加载相应的图片资源. 也就是说,我们不需要使用JavaScript也可以实现分辨 ...
7. img 的 srcset 属性的作用？
7. img 的 srcset 属性的作用? 响应式页面中经常用到根据屏幕密度设置不同的图片.这时就用到了 img 标签的 srcset 属性.srcset 属性用于设置不同屏幕密度下, img 会自 ...
html image的srcset属性
介绍响应式页面中经常用到根据屏幕密度设置不同的图片.这个时候肯定会用到image标签的srcset属性.srcset属性用于设置不同屏幕密度下,image自动加载不同的图片.用法如下: <im ...
响应式图片的实现（含picture标签、srcset属性、sizes属性的使用方法，设备像素比详解）
什么是响应式图片? 响应式图片即针对不同的设备分辨率和尺寸,显示对应的最佳分辨率的图片. 具体表现为: 高分辨率的屏幕,显示高分辨率图像(确保高清屏上,图片依然足够清晰) 低分辨率的屏幕,显示低分辨率 ...
CSS响应式图片运用中的srcset属性
在整个网站的开发中,在管理图片上较为困难.注意,图片要在各种设备上平滑过渡显示,它们将会碰到的问题有: 适当的优化和减少图片的体积注意不要浪费带宽(网站的成败与否加载速度是其中主要因素之一) 设备使 ...
img标签-srcset属性
今天看前辈的代码时,发现img标签有个陌生的srcset属性,如下: 1 <img class="Avatar" src="https://pic3.zhimg.c ...

image的srcset属性

介绍

新标准

总结

image的srcset属性相关推荐

最新文章

热门文章