html5 图片清晰化处理,HTML5中的picture元素响应式处理图片方法

电玩女神 2022-10-06 08:58 237阅读 0赞

![5268f80b9b1e01f982625ef6fac83ca1.png][]

所谓的响应式设计，是指在不同的屏幕分辨率，不同的像素密度比，不同宽度的终端设备中，网页布局可以自适应的调整。响应式设计的本意是使原本PC上的网站兼容移动终端，大部分响应式网页是通过媒体查询，加载不同样式的CSS文件实现的。这样的弹性化布局使网站在不同的设备终端布局都比较合理。本文主要介绍了详解HTML5中的picture元素响应式处理图片，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。

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

![c8515a3bf978a2e9babc3358f9a1fcd0.png][]

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

img\{

max-width:100%;

height:auto;

\}

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

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

新的解决方案：是HTML5的一个新元素；

如果元素与当前的,元素协同合作将增强响应式图像工作的进程，它允许在其内部设置多个标签，以指定不同的图像文件名，根据不同的条件进行加载；

可以根据不同的条件加载不同的图像，这些条件可以是视窗当前的高度(viewport)，宽度(width)，方向(orientation)，像素密度(dpr)等；

举几个栗子

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

![this is a picture][]

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

![this is a picture][]

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

![this is a picture][]

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

![this is a picture][]

5.如下例子中添加宽度描述；页面会根据当前尺寸选择加载不大于当前宽度的最大的图片；![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时加载对应版本的图片；

sizes="90vw"

srcset="picture-landscape-640.png 640w,

picture-landscape-1280.png 1280w,

picture-landscape-2560.png 2560w">

![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 对其兼容性较好，具体兼容性如图：

![560d457039b1ac4d5a6eadc6555a5878.png][]

优点：加载适当大小的图像文件，使可用带宽得到充分利用；

加载不同剪裁并具有不同横纵比的图像，以适应不同宽度的布局变化；

加载更高的像素密度，显示更高分辨率的图像；

步骤：创建标签；

在这些标签内创建一个你想用来执行任何一个特性的标签；

添加一个media属性，用来包含你想要的特性，如宽度(max-width，min-width)，方向(orientation)等；

添加一个srcset属性，属性值为相应的图像文件名称，进行加载。如果你想提供不同的像素密度，例如Retina显示屏，可以添加额外的文件名到srcset属性中；

添加一个回退的标签；

的工作原理

语法

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

元素

标签它本身没有属性。神奇的地方是被用来当做的容器。

元素，是用来加载多媒体的比如视频和音频，已经被更新用到图片的加载并且一些新的属性已经被添加：

srcset (必需)

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

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

media (可选)

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

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

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”)

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

添加最后的元素

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

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

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

相关推荐;

实例讲解响应式框架Bootstrap栅格系统

几款适合web程序员的响应式框架

HTML5响应式banner制作教程

[5268f80b9b1e01f982625ef6fac83ca1.png]: /images/20221005/16e94ffa3ef64f1ea1d63f94f61db59c.png
[c8515a3bf978a2e9babc3358f9a1fcd0.png]: /images/20221005/ad959242e89e418c938ea0deaad4be04.png
[this is a picture]: 
[560d457039b1ac4d5a6eadc6555a5878.png]: /images/20221005/f2c47e3144ef4f79a6050b77ebcf3654.png

发表评论取消回复

表情：

评论列表（有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML5 语义化元素

本文我们要来介绍一个抽象的知识点-语义化。什么是语义化，浅显的来说就是使用合适的语法来实现相应的功能，这里说的合适并非是从性能、数据结构、算法等深度层面，而是从阅读和维护方式等

矫情吗；*/ 2024年03月27日 12:13/ 0 赞/ 97 阅读

相关 HTML5 响应式布局

一、页面response.html <!DOCTYPE html> <html> <head lang="en"> <meta cha

布满荆棘的人生/ 2024年02月17日 17:49/ 0 赞/ 81 阅读

相关图片滑入页面html,html5+css3全屏响应式图片滑动预览代码

html5+css3全屏响应式图片滑动预览代码，左右箭头按钮控制图片水平滑动轮播，鼠标悬停图片还有好看的文字和按钮动画特效。 ![cd94bfdceb31f4269b2d14

灰太狼/ 2023年10月04日 16:04/ 0 赞/ 22 阅读

相关 html5 图片清晰化处理,HTML5中的picture元素响应式处理图片方法

![5268f80b9b1e01f982625ef6fac83ca1.png][] 所谓的响应式设计，是指在不同的屏幕分辨率，不同的像素密度比，不同宽度的终端设备中，网页布局

电玩女神/ 2022年10月06日 08:58/ 0 赞/ 238 阅读

相关 html5 文件在线处理,HTML 5中的文件处理之FileAPI

在众多HTML5规范中，有一部分规范是跟文件处理有关的，在早期的浏览器技术中，处理小量字符串是js最擅长的处理之一。但文件处理，尤其是二进制文件处理，一直是个空白。在一些情况下

末蓝、/ 2022年10月06日 00:45/ 0 赞/ 168 阅读

相关 html5 在线编辑图片大小,html5画布编辑图片问题

实现思路：base64Image -> 导入canvas -> 添加水印 -> 生成base64Image Document canvas image ![e57a4c

痛定思痛。/ 2022年10月06日 00:32/ 0 赞/ 266 阅读

相关 HTML+CSS+JS实现 ❤️ html5响应式图片轮播❤️

> 效果演示：文末获取源码 > > ![20210907204012896.gif][] > 代码目录： ![watermark_type_ZHJvaW

冷不防/ 2022年09月10日 11:23/ 0 赞/ 228 阅读

相关 HTML5&CSS3笔记：响应式设计中的 HTML5

所有现代浏览器都能够正确理解常见的 HTML5 新特性(新的结构元素、视频和音频标签)，而对老版本的 IE 则可以使用腻子脚本来弥补我所遇到过的所有缺陷。什么是腻

曾经终败给现在/ 2022年07月15日 14:20/ 0 赞/ 249 阅读

相关【HTML5】响应式图片

　　jq width() 、height()获取的是图片加载到页面上的图片显示尺寸（图片标签width、height属性值或max-width后的值）而非图片真实尺寸；所以虽然

谁借莪１个温暖的怀抱￠/ 2022年06月05日 08:55/ 0 赞/ 301 阅读

相关 HTML5 响应式图片

响应式图片的核心目的只写一遍代码，就能适用所有设备。（img 标签等价于 image 标签） 1、通过 srcset 切换分辨率（1）通过分辨率切换

末蓝、/ 2022年05月27日 01:52/ 0 赞/ 257 阅读