img元素srcset属性浅析
来源:互联网 发布:阿尔法算法 编辑:程序博客网 时间:2024/05/23 21:16
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" 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,比如印刷。
阅读全文
0 0
- img元素srcset属性浅析
- img 标签的新属性Srcset应用
- img 标签的新属性Srcset应用
- image的srcset属性
- image的srcset属性
- srcset属性实现响应式图片
- 响应式图片 srcset 和sizes属性
- 响应式图片 <img src=,srcset=,sizes=>
- img属性
- wordpress去掉评论响应式图片srcset属性
- img内联替换元素
- img是inline元素
- img 标签元素
- JS创建Img元素
- JS动态添加div、li、img等元素及设置属性(实例)
- IMG 元素的 complete 属性:不在标签上使用 onload 自动调整图像大小
- img标签usemap属性
- img align属性
- 获取HttpServletRequest请求消息头、消息行信息
- HDU 5201 The Monkey King (容斥+数学组合+隔板法)
- java第五天学习知识汇总
- Markov过程(马尔科夫过程)
- Unity角色技能及技能编辑器设计之概念篇
- img元素srcset属性浅析
- 智慧仓储篇 1 —— 仓储业务分析
- 大小端模式介绍及两种检测方式
- 创建用户和用户权限
- Mysql 远程连接 is not allowed to connect mysql server
- 活动安排问题的贪心算法
- HTTPS中的对称密钥加密,公开密钥加密,数字证书
- 一般背包问题的贪心算法
- 关于拦截登录session失效,页面包含页面问题