前言

　　相信前端小伙伴们对img元素已经烂熟于心，但不知是否了解picture元素呢？

　　简单来说，picture元素通过包含一个或多个<source>元素和一个<img>元素再结合media（媒体查询）来使用

　　从而达到根据不同屏幕分辨率显示不同图片的效果，具体使用请看下面demo

　　

　　Demo（下面demo会在屏幕宽度>=1200px时显示source引入的图片，当<1200px时显示img引入的图片）

<!DOCTYPE html>

<html>

     <head>

           <meta charset="UTF-8">

           <title></title>

     </head>

     <body>

           <picture>

                <source srcset="http://www.bhmpics.com/download/the_boxtrolls_movie_poster-1920x1080.jpg" media="(min-width: 1200px)"/>

                <img src="https://avatars1.githubusercontent.com/u/31434913?s=460&v=4"/>

           </picture>

     </body>

</html>

　　3个注意事项

　　　　①：默认显示source引入的图片资源，当不满足设置的media（媒体查询）条件或source不存在，则显示img引入的图片资源

　　　　  ②：若source中没有写media（媒体查询）条件，则img的图片资源始终不会被显示，默认只显示source引入的图片资源

　　　　  ③：picture标签中必须有img，如果只有source，则不会显示任何图片

　　兼容性（下面依次是PC端和移动端的兼容性截图，PC端主流浏览器除IE外都支持，移动端IOS9及以上，安卓6及以上都支持）

　　

　　 

 

picture元素的使用的更多相关文章

  1. 如何使用 HTML5 的picture元素处理响应式图片

    来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...

  2. HTML5<picture>元素

    HTML5<picture>元素可以设置多张图片 <!DOCTYPE html><html><head><meta http-equiv=&quo ...

  3. 【20190305】CSS-响应式图片：srcset+sizes，picture，svg

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

  4. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  5. HTML元素大全(1)

    01.基础元素 <h1/2/3/4/5/6>标题 从大h1到小h6,块元素,有6级标题.是一种标题类语义标签,内置了字体.边距样式. 合理使用h标签,主要用于标题,不要为了加粗效果而随意使 ...

  6. 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

  7. web响应式图片设计实现

    .header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...

  8. web前端图片极限优化策略

    随着web的发展,网站资源的流量也变得越来越大.据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力. 一.现有web图片格式 我们先来看下现在常用 ...

  9. 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势

    A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...

随机推荐

  1. Linux shell脚本编程及系统启动实践

    1.编写脚本,接受二个位置参数,magedu和/www,判断系统是否有magedu,如果没有则自动创建magedu用户,并自动设置家目录为/www [root@test qiuhom]#cat che ...

  2. 失败zero

    1127 系统玩崩溃了 分区助手调整c盘,导致自动进入快速启动然后疯狂boot网卡检测?还有测试中心? 查找错误initialization and establishing link,结论是bios ...

  3. C++入门到理解阶段二基础篇(3)——C++数据类型

    目录 1.数据类型概述 2.基本的内置类型 整型 实型(浮点型) 字符型 转义字符 字符串型 c风格的字符串 c++风格的字符串 布尔类型bool 1.数据类型概述 使用编程语言进行编程时,需要用到各 ...

  4. Git 实用命令记录

    自从上次写了一篇 Git 入门 的相关博客以来,一直自以为自己能完全的掌握 Git,其实不然,今天一小伙问我,如何删除远程上面的一个分支,呃,不会. git branch -d 分支名 只能删除本地的 ...

  5. Linux下载——下载文件的命令

    Linux下载——获取网络文件的命令 摘抄:本文主要学习了在Linux系统中如何下载文件的命令. wget命令 wget命令是一个用来下载文件的命令,可以在后台运行,在用户退出之后仍能继续下载,支持代 ...

  6. css文本超出部分用省略号表示

    以前我在面试中遇到过这个问题,当时没答上来,现在回答一下: 1.设置三个属性: overflow:hidden   (超出部分隐藏) white-space:nowrap    (强制不换行) tex ...

  7. react 地图可视化 cesium 篇

    Vue Function-based API RFC 一出来,感觉 vue 越来越像 react 了.新立项目,决定尝试下 react.js.下面是 react 集成 cesium,核心部分是 web ...

  8. Xcode模拟器无法启动解决办法

    今天遇到模拟器无法启动问题,点击模拟器或者Xcode build模拟器就一直跳,跳一会就不跳了,然后查看模拟器状态,显示为无响应.或者黑屏,等半天不动. 如果你有类似情况可以尝试在终端执行以下命令: ...

  9. ABP进阶教程5 - 多语言配置

    点这里进入ABP进阶教程目录 更新脚本 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Cours ...

  10. TypeScript 学习笔记（二）

    块级作用域变量: 1.不能在被声明前读或写 console.log(num); let num: number = 0; // 报错 2.仍然可以在一个拥有块级作用域的变量声明前通过函数捕获它,但不能 ...