前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >img标签中的srcset属性有什么用?

img标签中的srcset属性有什么用?

作者头像
JanYork_小简
发布2022-05-25 10:49:54
2.3K0
发布2022-05-25 10:49:54
举报
文章被收录于专栏:小简技术栈

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

也就是说,我们不需要使用JavaScript也可以实现分辨率自适应。

当然,仅限于图片,也就是img标签。

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

像这样就可以表示浏览器宽度达到800px则加载middle.jpg达到1400px则加载big.jpg

注意:像素密度描述只对固定宽度图片有效。

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

同时,css属性image-set()支持根据用户分辨率适配图像。

代码语言:javascript
复制
 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,比如印刷。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022 年 05 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档