介绍

响应式页面中经常用到根据屏幕密度设置不同的图片。这个时候肯定会用到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。
 2x、3x 表示目标屏幕的像素密度;400w、600w表示目标浏览器的宽度的限度,如浏览器宽度550w时,匹配600w的src。

总结

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

本文链接地址:https://segmentfault.com/a/1190000004254111?utm_source=tuicool&utm_medium=referral

image的srcset属性的更多相关文章

  1. img标签-srcset属性

    今天看前辈的代码时,发现img标签有个陌生的srcset属性,如下: 1 <img class="Avatar" src="https://pic3.zhimg.c ...

  2. img元素srcset属性浅析

    img srcset 属性 img 元素的 srcset 属性用于浏览器根据宽.高和像素密度来加载相应的图片资源. 属性格式:图片地址 宽度描述w 像素密度描述x,多个资源之间用逗号分隔.例如: &l ...

  3. -webkit新属性 image-set和srcset

    响应式图片的作用: 为使用不同分辨率的不同浏览器用户提供适合其浏览环境的图片大小的解决方案. 之前的解决方法是使用@media 但是-webkit新提出的image-set和srcset同样可以解决问 ...

  4. WebKit的已实施srcset图像响应属性

    WebKit已经发布了一些官方新闻,终于落实srcset的属性.作为W3C的响应图像社区组的主席,我一直希望这一刻到来有一段时间了.所以,对所有参与方是个好消息,用户浏览网页时的体验是最重要的. 所有 ...

  5. 【20190305】CSS-响应式图片:srcset+sizes,picture,svg

    响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片,从而节省带宽.实现响应式图片有三种方法:srcset+sizes属性.picture标签.svg 1. srcset+sizes srcse ...

  6. WebKit最新特性srcset简介(转)

    WebKit内核最新新增了对srcset属性的支持(参考:https://www.webkit.org/blog/2910/improved-support-for-high-resolution-d ...

  7. web前端学习(三)css学习笔记部分(8)-- SVN的介绍和应用、CSS动画效果、CSS3布局属性全接触

    15.SVN的介绍和应用 15.1.SVN的介绍和应用课程概要 将代码进行集中管理,有版本号的进行迭代,方便集体工作的build流程 15.2.SVN的介绍 SVN是Subversion的简称,是一个 ...

  8. AngularJS 参考手册

    AngularJS 参考手册 AngularJS 指令 本教程用到的 AngularJS 指令 : 指令 描述 ng-app 定义应用程序的根元素. ng-bind 绑定 HTML 元素到应用程序数据 ...

  9. layzr.js新版使用方法

    转载请注明出处:http://www.cnblogs.com/fiter/p/5413919.html 前言 今天研究这个JS库,本人新手,将官方的js代码下载下来后始终无法正常使用,经过多番尝试,终 ...

随机推荐

  1. 【黑魔法】Covering Indexes、STRAIGHT_JOIN

    今天给大家介绍两个黑魔法,这都是压箱底的法宝.大家在使用时,一定要弄清他们的适用场景及用法,用好了,就是一把开天斧,用不好那就是画蛇添足.自从看过耗子哥(左耳朵耗子)的博客,都会给对相应专题有兴趣的小 ...

  2. hdu5299 Circles Game

    Circles Game Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tot ...

  3. mysql分组用法

    --select num from 表 group by num --select num from 表 group by num,nid --特别的:group by 必须在where之后,orde ...

  4. 一个网站SEO优化方案

    首先,前端/页编人员主要负责站内优化,主要从四个方面入手: 第一个,站内结构优化 合理规划站点结构(1.扁平化结构 2.辅助导航.面包屑导航.次导航) 内容页结构设置(最新文章.推荐文章.热门文章.增 ...

  5. 网页出现400 Bad Request Request Header Or Cookie Too Large错误的解决方法

    在开发项目过程中,突然遇到400 Bad Request Request Header Or Cookie Too Large的报错,我也是第一次出现这样的错误,感觉还是挺新奇的. 分析下出现错误的原 ...

  6. RSEG用法和汇编问号的涵义

    RSEG是段选择指令,要想明白它的意思就要了解段的意思.段是程序代码或数据对象的存储单位.程序代码放到代码段,数据对象放到数据段.段分两种,一是绝对段,一是再定位段.绝对段在汇编语言中指定,在用L51 ...

  7. 单片机成长之路(51基础篇) - 012 MCS-51单片机控制详解–TMOD T2MOD

    TMOD:工作方式控制寄存器 寄存器地址89H,不可位寻址. 位序 B7 B6 B5 B4 B3 B2 B1 B0 位符号 GATE C/T M1 M0 GATE C/T M1 M0 GATE——门控 ...

  8. MySQL遇到Deadlock found when trying to get lock,解决方案

    最近遇到一个MYSQL update语句出现Deadlock found when trying to get lock的问题,分析一下原因. 什么情况下会出现Deadlock found when ...

  9. nginx(二)支持websocket配置

    在默认的配置nginx.conf文件中做如下配置改动 一.http域的设置 http { include mime.types; default_type application/octet-stre ...

  10. Cocos 编译android-studio

    3.15.1 之前: http://www.jianshu.com/p/ac2bac4734b8 http://www.jianshu.com/p/3d0cc85460d1 在工程项目下 运行 coc ...