今天看前辈的代码时，发现img标签有个陌生的srcset属性，如下：

1 <img class="Avatar" src="https://pic3.zhimg.com/8622a8eea_s.jpg" srcset="https://pic3.zhimg.com/8622a8eea_xs.jpg 2x" alt="测试用户1">

　　翻阅得知此属性用于：以最合适的src去匹配不同屏幕（高分屏低分屏如Retina；大屏小屏）。使用如下：

<img src="source.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x">

　　

<img src="source.jpg" width="100%"

  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

　　 2x、3x 表示目标屏幕的像素密度；400w、600w表示目标浏览器的宽度的限度，如浏览器宽度550w时，匹配600w的src。

通过

window.devicePixelRatio
来获取像素比

img标签-srcset属性的更多相关文章

  1. image的srcset属性

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

  2. HTML5的Video标签的属性,方法和事件汇总

    <video>标签的属性 src :视频的属性 poster:视频封面,没有播放时显示的图片 preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览 ...

  3. php 内置支持的标签和属性

    内置支持的标签和属性列表如下: 标签名 作用 包含属性 include 包含外部模板文件(闭合) file import 导入资源文件(闭合 包括js css load别名) file,href,ty ...

  4. video标签的属性和方法总结

    最近想做一个弹幕插件,查了很多video标签的属性和方法 error属性 在正常读取时候,使用媒体数据的过程中,video元素或audio元素的error属性为null,但是任何时候只要出现错误,er ...

  5. HTML video 视频标签全属性详解

    HTML 5 video 视频标签全属性详解   现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera.Mozilla.C ...

  6. HTML5探索一（那些新增的标签和属性）

    tml5相比html4,添加了部分语义化的标签和属性,现在我们就从这些标签和属性开始,学习html5吧. 首先,认识下HTML5新的文档类型: <!DOCTYPE html> 那些新标签 ...

  7. 关于html标签和属性的基本理解

    一.关于标签和属性的基本理解: html页面的内容主要由"元素"或"标签"组成.使用标签来描述网页的内容. 标签tag一般都是成对出现,开始标签和结束标签,或者 ...

  8. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  9. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

随机推荐

  1. openldap 备份与导入 及相关问题

    摘要: 对openldap进行备份时,直接使用slapcat命令进行备份,使用ldapadd还原出现问题及解决. 介绍: 对openldap进行备份时,直接使用slapcat命令进行备份(如代码一), ...

  2. 7处ff与ie中读写html、css相关属性的不同之处

    1. float样式属性 IE syntax: document.getElementById("test").style.styleFloat = "left" ...

  3. web开发，让用户流水线进行操作，不可返回后退

    在项目开发中非常多人会有这种需求.就是想要操作做过了不能后退.之前在网上找过点,都说没有什么好的办法.我有的说有js,但效果不好,不说连点两下能够让他失效,有不同浏览器中也无法兼容,如 functio ...

  4. 【工具】小巧好用的屏幕截图工具——ScrToPic

    百度搜ScrToPic,有绿色版的用. 好处: 小巧快捷,不用为了截图而开QQ,不用看QQ的弹窗广告. 可以自定义截图区域和窗口捕捉,可以自定义这两个功能的快捷键. 截图时可以选择要不要显示鼠标. 窗 ...

  5. [script]判定某一个脚本是否正确执行

    返回内容存在$?, 0代表成功,其他代表失败 some_command ]; then echo OK else echo FAIL fi 字符型的返回值 some_command retval=$? ...

  6. Just Cause系列游戏品鉴

    没错, 这又是一个游戏点评, 因为实在没地写了, 想起来我还欠JC系列许多售后评价, 就专门写了这篇blog来总结下JC系列的特色, 以及它最新的游戏引擎apex, JC4月初的时候发布的, 虽然和3 ...

  7. Linux - tar命令 压缩 和 解压

    压缩 tar -cvf jpg.tar *.jpg //将目录里所有jpg文件打包成tar.jpg tar -czf jpg.tar.gz *.jpg //将目录里所有jpg文件打包成jpg.tar后 ...

  8. 我们要注意的Mysql基本安全设置

    1.设置或修改Mysql root密码:默认安装后空密码,以mysqladmin命令设置密码: mysqladmin -uroot password "password" Mysq ...

  9. Connector/c++ 查询Mysql，出现 can't fetch because not on result set 错误

    使用 Connector/C++ 查询 Mysql 时,出现错误,提示如下: can't fetch because not on result set, 出现原因可以看这里:http://stack ...

  10. 命令行启动kettle

    kettle命令启动: http://download.csdn.net/detail/ludaxin6/9519418 kettle命令启动参数: http://blog.csdn.net/glei ...