picture元素的使用
前言
相信前端小伙伴们对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元素的使用的更多相关文章
- 如何使用 HTML5 的picture元素处理响应式图片
来自: http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html 图片在响应 ...
- HTML5<picture>元素
HTML5<picture>元素可以设置多张图片 <!DOCTYPE html><html><head><meta http-equiv=&quo ...
- 【20190305】CSS-响应式图片:srcset+sizes,picture,svg
响应式图片可以根据不同的设备屏幕大小从而选择加载不同的图片,从而节省带宽.实现响应式图片有三种方法:srcset+sizes属性.picture标签.svg 1. srcset+sizes srcse ...
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- HTML元素大全(1)
01.基础元素 <h1/2/3/4/5/6>标题 从大h1到小h6,块元素,有6级标题.是一种标题类语义标签,内置了字体.边距样式. 合理使用h标签,主要用于标题,不要为了加粗效果而随意使 ...
- 【读书笔记《Bootstrap 实战》】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
- web响应式图片设计实现
.header { cursor: pointer } p { margin: 3px 6px } th { background: lightblue; width: 20% } table { t ...
- web前端图片极限优化策略
随着web的发展,网站资源的流量也变得越来越大.据统计,60%的网站流量均来自网站图片,可见对图片合理优化可以大幅影响网站流量,减小带宽消耗和服务器压力. 一.现有web图片格式 我们先来看下现在常用 ...
- 【Bootstrap】3.优化站点资源、完成响应式图片、让传送带支持手势
A.优化站点资源 速度很重要.用户很关心.我们的站点必须加载够快,否则用户就会走人.SEO 也很重要.我们的站点必须加载够快,否者搜索排名就会下降. 明白了这样,我们就来清点一下 [Bootstrap ...
随机推荐
- 史上最全的Java命名规范[转]
每个公司都有不同的标准,目的是为了保持统一,减少沟通成本,提升团队研发效能.所以本文中是笔者结合阿里巴巴开发规范,以及工作中的见闻针对Java领域相关命名进行整理和总结,仅供参考. 一.Java中的命 ...
- Android studio移动项目到另外一个文件夹,结果不能安装的解决方法
删除.gradle , .idea , build 三个文件夹即可
- PHP通过session判断防止表单重复提交实例
PHP通过session判断防止表单重复提交实例,当用户提交表单后,为防止重复操作,通过session来判断是否为初次提交,否则让他返回到之前表单页面. 当前表单页面is_submit设为0 SESS ...
- maven使用问题总结
maven dependencies 报红叉的问题: 第一种:检查bulid path 里面maven dependencies 是否丢失包 miss jar. 解决方法1:https://blog. ...
- 搭建RTMP直播流服务器
最近项目比较紧张,所以没什么时间写博客,正好这几天没什么事,赶紧记录下自己最近所学. 环境配置 服务器选用 服务器我选择的是小鸟云 ,原因很简单,他的个人用户有3个月免费使用时间. 服务器环境 Win ...
- [20190821]关于CPU成本计算.txt
[20190821]关于CPU成本计算.txt --//有人问链接http://blog.itpub.net/267265/viewspace-2653964/中CPU成本如何计算的,实际上一般在优化 ...
- [MySQL] 解决Error 1698: Access denied for user 'root'@'localhost'
当程序中使用root账号连接mysql时报以下错误,但是使用命令行是可以正常连接的,那么就查询下mysql数据库的user表,查看下当前用户的密码加密方式,看看是不是unix_socketMariaD ...
- 【CobaltStrike】对CobaltStrike内置功能模块的了解
对CobaltStrike内置功能模块的了解 0x00 右键功能列表 Interact 打开beacon Access dump hashes 获取hash Elevate 提权 Golden Tic ...
- prometheus数据可视化
一.prometheus自带简单的web可视化页面: http://192.168.1.28:9090/graph 二.grafana是一套开源的分析监视平台,支持prometheus等数据源:UI非 ...
- Apache(基于端口号)
1.配置服务器的IP地址 2. 创建网站数据目录 (1).分别创建端口为6111,6222的网站数据目录 (2).分别在网站数据目录中写入不同的内容 3.在配置文件中描述基于端口号的虚拟主机 (1) ...