腾讯云
开发者社区
文档
建议反馈
控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
搜索
搜索
关闭
发布
登录/注册
首页
学习
活动
专区
工具
TVP
最新优惠活动
返回腾讯云官网
机器学习从入门到成神
专栏作者
举报
126
文章
176382
阅读量
33
订阅数
订阅专栏
申请加入专栏
全部文章(126)
其他(104)
http(95)
机器学习(7)
python(5)
编程算法(3)
存储(3)
matlab(2)
scikit-learn(2)
数据处理(2)
cocoa(1)
go(1)
xml(1)
css(1)
html(1)
数据库(1)
linux(1)
spring(1)
神经网络(1)
文件存储(1)
numpy(1)
决策树(1)
线性回归(1)
二叉树(1)
数据结构(1)
搜索文章
搜索
搜索
关闭
image的srcset属性
css
html
介绍 响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到image标签的srcset属性。srcset属性用于设置不同屏幕密度下,image自动加载不同的图片。用法如下: <img src="image-128.png" srcset="image-256.png 2x" /> 使用上面的代码,就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。 新标准 按照上面的实现,不同的屏幕密度都要设置图片地址,目前的屏幕密度有1x,2x,3x,4x四种,如果每一个图片都设置4张图片的话,太麻烦了。所以就有了新的srcset标准。代码如下: <img src="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没有兼容到,已经全部都兼容了,可以放心使用。
大黄大黄大黄
2018-09-14
941
0
没有更多了
社区活动
腾讯技术创作狂欢月
“码”上创作 21 天,分 10000 元奖品池!
立即发文
Python精品学习库
代码在线跑,知识轻松学
立即查看
博客搬家 | 分享价值百万资源包
自行/邀约他人一键搬运博客,速成社区影响力并领取好礼
立即体验
技术创作特训营·精选知识专栏
往期视频·千货材料·成员作品 最新动态
立即查看
领券
问题归档
专栏文章
快讯文章归档
关键词归档
开发者手册归档
开发者手册 Section 归档