html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片
图片在响应式网页设计中是出了名的最具挑战性的方面之一。今天我们就来看看如何使用元素来处理响应式图片.
让我们先了解一下问题
固定宽度,像素完美的网站设计已经离我们远去了。在宽屏显示器,互联网电视,多尺寸的平板电脑和智能手机的今天,我们的设计必须应付一切可能,将宽由320px向7680px转变。
伴随这种多分辨率风景而至的,是需要拉伸或收缩图像,以适应这些不同的要求。这可以被理解为如下问题,矢量图形出现异常时,绝大多数具有特定像素的图像宽度并不改变。
所以,我们应该怎么做呢?
目前最常见的解决方案
作为一般规则,你会在任何响应式网站中发现以下CSS样式:
img {
max-width: 100%;
height: auto;
}
此代码使用max-width:100%的设置,以确保图像永远不会超越其父容器的宽度。如果父容器的宽度收缩小于图像的宽度,图像将随之缩小。height:auto的设置可以确保当有这种情况发生时,图像将以自身的宽高比保留。
这解决了一方面的问题,使我们能够在许多不同的情况下显示相同的图像。不过,这并不能让我们对不同的情况指定不同的图像。
新的解决方案:
是HTML5一个新的元素。
如果元素与当前的和元素协同合作将大大增强响应式图像的工作进程。它允许你放置多个source标签,以指定不同的图像文件名,进而根据不同的条件进行加载。
它可以让你根据以下条件加载完全不同的图像:
媒体特性结果如:视口的当前高度(viewport height),宽度(width),方向(orientation)。
像素密度
反过来这也意味着您可以:
加载适当大小图像的文件,使可用带宽得到充分利用。
加载不同裁剪并具有不同纵横比的图像,以适合于不同宽度的布局变化。
加载更高的像素密度,显示更高分辨率的图像。
的工作原理
基本工作步骤如下:
创建标签。
在这些标签内创建一个你想用来执行任何一个特性的元素。
添加一个media属性,用来包含你想要的特性,如视口的当前高度(viewport height),宽度(width),方向(orientation)等。
添加一个srcset属性与相应的图像文件名相匹配,进行加载。如果你想提供不同的像素密度,例如Retina显示屏,你可以添加额外的文件名到你的srcset属性中,
添加一个回退的元素。
这里有一个简单的基本的例子,用来检查视口是否小于768px,如果小于的话就加载一个较小的图像:
你可能会注意到,在media属性使用的语法与创建CSS媒体特性中使用的语法一样。您可以使用相同的特性,这意味着你可以查询max-width,min-width,max-height,min-height,orientation等属性。
同时,您也可以使用这些特性判断设备的方向,从而加载横向或纵向版本的图像,同时您也可以进行大小特性的混合。例如:
上面的代码实现了可以在一个小的景观设备上加载小的,景观裁剪图像的版本。在大的景观设备上加载大的相同的图像版本。
这样,在小尺寸的小型设备上,或在大尺寸的大型设备上,该设备可以自主进行图像主导从而加载不同图像剪裁的版本。
如果您想为更高密度的显示器提供不同分辨率的图像版本,可以通过在srcset属性中添加额外的文件名来实现。例如,让我们来看看屏幕像素密度为2x的Retina 代码处理片断:
元素现在的使用情况
现在,Chrome,Firefox和Opera浏览器都已经实现了对元素的支持。在不久的将来,在其他浏览器也将得到广泛的支持。但现在这一时刻还没有来临。
与此同时,如果你现在就想使用元素可能还需要等待。你也可以使用Picturefill2.0;Filament 成员提供的一个polyfill。
通过下载并添加picturefill.js文件到您项目的头部就可以实现:
还有你可以通过异步加载脚本来增加效率,你可以参考Picturefill的文档。
有了这个脚本加载,除了少数的限制,元素将如我所讲的运行。
Picturefill的限制
IE9
Picturefill在其他的IE版本都可以正常工作,但是IE9却不能识别被包裹在picture标签中的source元素。为了解决这个问题,在video标签内包住你的源元素,这就会使他们在IE9中被识别,例如:
Android 2.3
和IE9一样,Android 2.3识别不了在picture元素中source元素。然而,在使用常规的img标签时,它就可以识别srcset属性。为了避免在Android 2.3及任何有相同问题的其他浏览器中出现此问题,确保在srcset属性中存在默认用于回退的img元素的文件名。
需要JavaScript和本地媒体特性的支持
有了这个基于JavaScript的解决方案,因此在浏览器中需要支持JavaScript。 Picturefill 2.0不提供“no-js”的解决方法,因为如果这样,当原生浏览器支持元素时,将会出现多个图像。但是,如果“no-js”是你的不二选择,你必须使用Picturefill 1.2。
Picturefill另外一个要求就是需要本地媒体特性的支持,从而使media属性中的特性能够正常工作。所有现代浏览器都支持媒体特性,IE8和以及更低版本的浏览器是剩下的唯一不支持的用户群。
可能存在的额外HTTP请求
在原生支持srcset元素,但不支持picture元素的浏览器中,和回退的img元素中指定的文件名可能会被提前调用,从而会在source元素中确定一个更好的拟合图片。
这只是一个暂时的问题,一旦本地支持picture元素就会自行消失。
更多信息
了解更多关于Picturefill 2.0的信息并在Picturefill网站上下载下来用于您的项目上。
从responsiveimages.org获取关于元素的信息。
今天在您的项目中就尝试使用元素,看看是否实现了预期功能!
在校学生,本科计算机专业。一个积极进取、爱笑的女生,热爱前端,喜欢与人交流分享。想要通过自己的努力做到心中的那个自己。微博:@静-如秋叶
html中图片响应式怎么写,如何使用 HTML5 的picture元素处理响应式图片相关推荐
- 【探索HTML5第二弹05】响应式布局(中),一步一步响应式布局
前言 前天初步探究了一次响应式布局,虽然花了一天功夫,做出来的东西还是不行,在此我还是认为要做响应式布局设计应该先行,应该先制作3个以上的设计图出来,但是对于手机来说,图片流量也是个问题,但是这个我们 ...
- 艿艿连肝了几个周末,写了一篇贼长的 Spring 响应式 Web 框架 WebFlux!市面第二完整~...
点击上方"芋道源码",选择"设为星标" 做积极的人,而不是积极废人! 源码精品专栏 原创 | Java 2020 超神之路,很肝~ 中文详细注释的开源项目 RP ...
- vue中根据后端接口数据控制按钮的显示与隐藏(手动添加响应式this.$set())
项目涉及到的问题,按钮需要根据后端返回的参数情况,实现按钮的显示与隐藏. 效果如图: 1.查看后端接口 get请求,需要传businessId和compoCode两个参数,返回的data有数据就显示按 ...
- 响应式图片(srcset属性和picture元素)
自适应网页设计意味着,不仅我们的布局能根据设备特性而变化,内容也可以.例如,高分辨率 (2x) 显示屏上高分辨率图形可保证清晰度.当浏览器宽度为 800px 时,一张 50% 宽度的图像或许很适合,但 ...
- dev中循环展示图片的样式怎么写_DevExpress:可左右滑动的图片框的ImageSlider
控件库DevExpress使用笔记,我的DevExpress版本为13.1 1.控件类型全称:DevExpress.XtraEditors.Controls.ImageSlider 2.控件所在程序集 ...
- 响应式布局html像素值计算,CSS Calc():制作响应式网格布局的锋利武器
响应式的布局方式是当下最为流行网页布局.对于一个响应式的网格系统,可以有多种的解决方案.在这篇文章中,我们将和大家分享使用CSS calc()函数来制作响应式网格的一些知识. With calc(), ...
- 《响应式web设计》读书笔记(三)拥抱流式布局
一.什么是流式布局 流式布局已经不是什么新概念了.为了文章的完整性,还是提一提吧.很久很久以前,当大部分人的屏幕分辨率还是1024*768的时候,网页设计师一般都按照960px或是980px的固定宽度 ...
- 响应式布局必懂知识_五分钟教会你响应式布局
第一:正确理解响应式布局 第二:响应式设计基本步骤 第三:响应式设计注意事项 第四:响应式布局实现原理 第一:正确理解响应式布局 响应式网页设计就是一个网站能够兼容多个终端,而不是为每个终端都做一个特 ...
- HTML5实践 -- 三步实现响应式设计
HTML5实践 -- 三步实现响应式设计 响应式web设计现在已经不是一个难事了,如果你还不熟悉他,可以参看我的文章<HTML5实践 -- 流式响应式设计>.如果你是一个初学者,可能响应式 ...
最新文章
- phonegap for mac
- 一文读懂HttpServletRequest
- 【Python】Python字符串格式化问题:%、format()与f-strings
- c#金额转换成中文大写金额
- DataTable不能通过已删除的行访问该行的信息解决方法
- Beyond Compare配置
- mysql 区间/替换/自增/where与having/字段运算/关键词/修改字段
- VoltDB开篇 简介
- mysql case默认_MySQL -- 配置文件my.cnf 的详细说明
- linux下nginx重启命令
- java实现阿里云短信验证
- c++获取umg ue_[UE4]UMG widget Property Binding(属性绑定),事件触发蓝图函数和C++函数...
- 咸鱼CAD笔记—CAD快捷键
- Xmind教程-添加外框
- 如何优雅的写C++代码 Obotcha介绍(字符串转uint8_t)
- word文档中文字字符长度不一,如何快速调整使上下行左右对齐
- 关于第三方App发起Unity开发的app的解决方案
- 《零基础学C语言》光盘内容
- 拓嘉辰丰电商:拼多多订单漏发怎么处理比较好
- 开发人员各级岗位胜任力模型
热门文章
- mybatis里mapper.xml中SQL语句if语句嵌套if语句
- php 地址传递,PHP引用符传递存储地址
- Java 异常种类及处理方法
- matlab中计算不等式的解,matlab解不等式
- php serialize和json_encode哪个更快_世界 10 大编程语言,Java 不是第一,PHP 才第五...
- 计算机桌面打标签,在电脑桌面上添加便签的方法步骤详解(2)
- JVM垃圾收集器——G1
- 打印两个有序链表的公共部分~~
- CBOW模型的数据预处理
- zigbee板子:lcd显示汉字