详解HTML5中的picture元素响应式处理图片


Posted in HTML / CSS onJanuary 03, 2018

响应式设计

所谓的响应式设计,是指在不同的屏幕分辨率,不同的像素密度比,不同宽度的终端设备中,网页布局可以自适应的调整。响应式设计的本意是使原本PC上的网站兼容移动终端,大部分响应式网页是通过媒体查询,加载不同样式的CSS文件实现的。这样的弹性化布局使网站在不同的设备终端布局都比较合理。

虽然响应式设计的好处多多,但是也有诸多缺陷。由于PC端和移动终端访问的是同一个网站,PC端可以不计较流量限制,但是移动端不可能不计较。

详解HTML5中的picture元素响应式处理图片

为适配不同终端机型的屏幕宽度和像素密度,我们一般会使用如下方法设置图片的CSS样式:

<style>
    img{
        max-width:100%;
        height:auto;
    }
</style>

将图片的最大宽度设置为100%,以确保图像不会超出其父级元素的宽度,如果父级元素的宽度发生改变,图片的宽度也随之改变,height:auto 可以确保图片的宽度发生改变时,图片的高度会依据自身的宽高比例进行缩放。

这样当我们在移动设备上访问响应式网页里的图片时,只是把图片的分辨率做了缩放,下载的还是PC端的那张大图,这样不仅浪费流量,而且浪费带宽,而且会拖慢网页的打开速度,严重影响用户的使用体验。

新的解决方案:<picture>

  1. <picture>是HTML5的一个新元素;
  2. 如果<picture>元素与当前的<audio>,<video>元素协同合作将增强响应式图像工作的进程,它允许在其内部设置多个<source>标签,以指定不同的图像文件名,根据不同的条件进行加载;
  3. <picture>可以根据不同的条件加载不同的图像,这些条件可以是视窗当前的高度(viewport),宽度(width),方向(orientation),像素密度(dpr)等;

举几个栗子

如下栗子中针对不同屏幕宽度加载不同的图片;当页面宽度 在320px到640px之间时加载minpic.png;当页面宽度大于640px时加载middle.png

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
    <source media="(min-width: 640px)" srcset="img/middle.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

2.如下栗子中添加了屏幕的方向作为条件;当屏幕方向为横屏方向时加载_landscape.png结尾的图片;当屏幕方向为竖屏方向时加载 _portrait.png结尾的图片;

<picture>
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
    <img src="img/picture.png" alt="this is a picture">
</picture>

3.如下栗子中添加了屏幕像素密度作为条件;当像素密度为2x时加载_retina.png 2x 的图片,当像素密度为1x时加载无retina后缀的图片;

<picture>
    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png,img/minpic_retina.png 2x">
    <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">
    <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture">
</picture>

4.如下栗子中添加图片文件格式作为条件,当支持webp格式图片时加载webp格式图片,当不支持时加载png格式图片;

<picture>
    <source type="image/webp" srcset="img/picture.webp">
    <img src="img/picture.png" alt="this is a picture">
</picture>

5.如下例子中添加宽度描述;页面会根据当前尺寸选择加载不大于当前宽度的最大的图片;

<img src="picture-160.png" alt="this is a picture"
     sizes="90vw" 
     srcset="picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w">

6.如下例子中添加sizes属性;当窗口宽度大于等于800px时加载对应版本的图片;

<source media="(min-width: 800px)"
        sizes="90vw" 
        srcset="picture-landscape-640.png 640w,
                picture-landscape-1280.png 1280w,
                picture-landscape-2560.png 2560w">
<img src="picture-160.png" alt="this is a picture"
     sizes="90vw" 
     srcset="picture-160.png 160w,
             picture-320.png 320w,
             picture-640.png 640w,
             picture-1280.png 1280w">

兼容性:

目前只有Chrome , Firefox , Opera 对其兼容性较好,具体兼容性如图:

详解HTML5中的picture元素响应式处理图片

优点:

  1. 加载适当大小的图像文件,使可用带宽得到充分利用;
  2. 加载不同剪裁并具有不同横纵比的图像,以适应不同宽度的布局变化;
  3. 加载更高的像素密度,显示更高分辨率的图像;

步骤:

  1. 创建<picture></picture>标签;
  2. 在这些标签内创建一个你想用来执行任何一个特性的<source></scource>标签;
  3. 添加一个media属性,用来包含你想要的特性,如宽度(max-width,min-width),方向(orientation)等;
  4. 添加一个srcset属性,属性值为相应的图像文件名称,进行加载。如果你想提供不同的像素密度,例如Retina显示屏,可以添加额外的文件名到srcset属性中;
  5. 添加一个回退的<img>标签;

<picture>的工作原理

<picture>语法

由上面的示例代码可知,在没有引入js和第三方库,CSS中没有包含media queries的情况下,<picture>元素可以实现只用HTML来声明响应式图片;

<source>元素

<picture>标签它本身没有属性。神奇的地方是<picture>被用来当做<source>的容器。
<source>元素,是用来加载多媒体的比如视频和音频,已经被更新用到图片的加载并且一些新的属性已经被添加:

srcset (必需)

接受单一的图片文件路径(如:srcset=”img/minpic.png”).

或者是逗号分隔的用像素密度描述的图片路径(如:srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默认不使用的。

media (可选)

接受任何验证的media query,你可以看到在CSS @media选择器(如:media=”(min-width: 320px)”).

在之前的<picture>语法的例子里已经用到了。

sizes(可选)

接收单一的宽度描述(如:sizes=”100vw”)或者单一的media query宽度描述(如:sizes=”(min-width: 320px) 100vw”).

或者逗号分隔的media query对宽度的描述(如:sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最后的一个被当做默认的。

type(可选)

接受支持的MIME类型(如: type=”image/webp” or type=”image/vnd.ms-photo”)

浏览器会根据这些提示和属性来加载确切的图片资源。根据标签的列表顺序。浏览器会使用第一个合适的<source>元素并忽略掉后面的<source>标签。

添加最后的<img>元素

<img>元素在<picture>内部用来当浏览器不支持时或者没有源标签匹配时的显示。在<picture>内使用<img>标签是必须得,如果你忘记了,将不会有图片显示出来。

用<img>来声明默认的图片显示。将<img>标签放到<picture>内的最后,浏览器在找到<img>标签之前会忽略<source>的声明。这个图片标签也需要你写上它的alt属性。

文中借鉴了很多其他的文章,到这里针对于picture的所有介绍就结束了,那么现在就去试试它吧~

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
真正了解CSS3背景下的@font face规则
May 04 HTML / CSS
让IE6支持css3,让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
使用CSS3编写灰阶滤镜来制作黑白照片效果的方法
May 09 HTML / CSS
CSS3的颜色渐变效果的示例代码
Sep 29 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 HTML / CSS
H5仿微信界面教程(一)
Jul 05 HTML / CSS
突袭HTML5之Javascript API扩展3—本地存储全新体验
Jan 31 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
Html5大屏数据可视化开发的实现
Jun 11 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 #HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 #HTML / CSS
Canvas绘制浮动球效果的示例
Dec 29 #HTML / CSS
微信小程序“圣诞帽”的实现思路详解
Dec 28 #HTML / CSS
基于HTML5+Webkit实现树叶飘落动画
Dec 28 #HTML / CSS
HTML5 解决苹果手机不能自动播放音乐问题
Dec 27 #HTML / CSS
canvas实现圆形进度条动画的示例代码
Dec 26 #HTML / CSS
You might like
php curl 伪造IP来源的实例代码
2012/11/01 PHP
php数组去重的函数代码
2013/02/03 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
ThinkPHP 在阿里云上的nginx.config配置实例详解
2017/10/11 PHP
PHP异常类及异常处理操作实例详解
2018/12/19 PHP
关于laravel 数据库迁移中integer类型是无法指定长度的问题
2019/10/09 PHP
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
js setTimeout opener的用法示例详解
2013/10/23 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
vue+vue-router转场动画的实例代码
2018/09/01 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
vue3实现v-model原理详解
2019/10/09 Javascript
Vue学习笔记之计算属性与侦听器用法
2019/12/07 Javascript
在vue中使用Echarts画曲线图的示例
2020/10/03 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
Python实现3行代码解简单的一元一次方程
2014/08/18 Python
Pyhthon中使用compileall模块编译源文件为pyc文件
2015/04/28 Python
用Python写冒泡排序代码
2016/04/12 Python
python文本数据相似度的度量
2018/03/12 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
雅诗兰黛美国官网:Estee Lauder美国
2016/07/21 全球购物
美国钻石商店:Zales
2016/11/20 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
职业生涯规划书基本格式
2014/01/06 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
简易离婚协议书范本
2014/10/24 职场文书
丧事答谢词大全
2015/09/30 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书