Html Picture

picture需要同时处理“分辨率切换”和“图像切换”，并且 picture 标签是最好的解决方案。

分辨率切换 : 使用img，使用属性 解决 srcset 和 size；
分辨率切换和图像切换 ： 使用 picture 标签的媒体查询和其他属性轻松实现

//  srcset 属性接收多个图像，其宽度都以像素为单位，浏览器使用这些值在提供的图像之间进行选择
//  sizes 属性定义图像将在屏幕上占据的空间

  <picture><sourcesrcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w"sizes="(min-width: 1280px) 1200px,(min-width: 768px) 400px,100vw"/><img src="medium-car-image.jpg" alt="Car" /></picture>// 在上面的示例中，同一图像有 3 个版本，具有 3 种不同的尺寸
// 如果屏幕的最小宽度为 1280px，则图像将占据 1200px。// 建议不要仅将 picture 标签用于分辨率切换使用，可以使用img标签

  <imgsrcset="small-car-image.jpg 400w, medium-car-image.jpg 800w, large-car-image.jpg 1200w"sizes="(min-width: 1280px) 1200px,(min-width: 768px) 400px,100vw"src="medium-car-image.jpg"alt="Car"/>

使用媒体属性切换图像

图像切换背后的主要思想是根据设备的屏幕尺寸显示不同的图像。
在大多数情况下，切换到移动设备时，在大屏幕上看起来很棒的图像可能会被裁剪或显得很小；可以为不同的屏幕尺寸提供不同版本的图像来解决这一问题（不同版本 可以是同一图像的横向，纵向或任何自定义版本）

// picture 标签中的多个 source 标签轻松实现分辨率切换<picture><source ....><source ....><source ....></picture>

  <picture><sourcemedia="(orientation: landscape)"srcset="land-small-car-image.jpg 200w, land-medium-car-image.jpg 600w, land-large-car-image.jpg 1000w"sizes="(min-width: 700px) 500px,(min-width: 600px) 400px,100vw"/><sourcemedia="(orientation: portrait)"srcset="port-small-car-image.jpg 700w, port-medium-car-image.jpg 1200w, port-large-car-image.jpg 1600w"sizes="(min-width: 768px) 700px,(min-width: 1024px) 600px,500px"/><img src="land-medium-car-image.jpg" alt="Car" /></picture>// 屏幕方向是横向，则浏览器将显示第一组图像；
// 如果屏幕方向是纵向，则浏览器将使用第二组图像// media 属性与 max-width 和 min-width 参数一起使用<picture><source media="(max-width: 767px)" ....><source media="(min-width: 768px)" ....></picture>// img 标签用于向后兼容不支持 picture 标签的浏览器。

用于受部分支持的图像类型

新的图像格式,其中一些格式（例如 webp、svg 和 avif）提供了更高的用户体验水平;
某些浏览器对这些现代图像类型存在限制，如果我们不使用兼容的图像类型，事情将会适得其反

  <picture><source srcset="test.avif" type="image/avif"><source srcset="test.webp" type="image/webp"><img src="test.png" alt="test image"></picture>// avif、webp 和 png 格式的三种图像类型// 浏览器将尝试 avif 格式；
// 如果失败，则将尝试 webp 格式。
// 如果浏览器不支持这两种方式，它将使用 png 图像

Chrome中 Rendering 标签可以模拟 浏览器对 AVIF 和 webP 图片的格式的支持情况

Html Picture相关推荐

usaco Picture(离散化求线段周长）
usac前面有一题是递归求矩形覆盖面积的,学到不少东西离散化把所有矩形离散化(就是将整个平面分成许多"竖条"或"横条",对其操作),每个矩形都由四条边组成, ...
[hdu1828] Picture
帅哥美女们大家好! 今天本蒟蒻补一篇题解! 线段树维护扫描线求矩形周长并. 扫描线的话,跟求面积类似,这道题可以只扫一次,也可以x,y两个方向分别扫一次. 题目传送门 1 #include<cs ...
vc picture控件载入背景图，随控件大小改变
在mfc里,想要在Picture控件中载入一张图片有两种方法:静态的和动态的.静态的方法就是图片先载入资源(.rc)文件中,拥有一个唯一的ID:动态的方法就是制定图片的路径名即可. 当然这样的方法网上 ...
基于Picture Library创建的图片文档库中的上传多个文件功能(upload multiple files)报错怎么解决？...
复现过程首先,我创建了一个基于Picture Library的图片文档库,名字是 Pic Lib 创建完毕后,我点击它的Upload 下拉菜单,点击Upload Picture按钮在弹出的对话框中 ...
H.264 picture parameter sets成员值含义学习笔记
-picture parameter sets 1. pic_parameter_set_id pic_parameter_set_id指明了在切片头中对应的某个psp.pic_parameter_s ...
Codeforces Global Round 8 C. Even Picture 题解[巧妙法构造题]
C. Even Picture 题目大意:让你构造一个连通图,图中有k个灰点其中n个点4面都是灰点,(k-n)个点周围2个点是灰点我们设最上面的为(1,1)点就可以了 ps:exactly:只有,其 ...
图像隐藏matlab代码,picture Matlab简单操作实现图像的隐藏加密联合开发网 - pudn.com...
picture 所属分类:其他开发工具:Others 文件大小:15KB 下载次数:1 上传日期:2018-07-18 09:50:48 上传者:至尊宝物语说明: Matlab简单操作实现图 ...
十、图像参数集Picture Paramater Set(PPS)解析
GitHub代码地址:点击这里除了序列参数集SPS之外,H.264中另一重要的参数集合为图像参数集Picture Paramater Set(PPS).通常情况下,PPS类似于SPS,在H.264的 ...
视频压缩编码 gop（Group of Pictures）（I帧间隔）的概念、IDR、I帧（关键帧，intra picture）、P帧、B帧、帧内压缩、帧间压缩、pts（显示时间）、dts（解码时间）
文章目录前言: 关于视频的基础定义 GOP:Group of Pictures 压缩(也就是编码) 帧内压缩:自己本身压缩,不参考其他的帧. 帧间压缩:参考其他视频帧压缩. 解码(解压缩) 为什么好 ...
MFC 对话框Picture Control(图片控件)中静态和动态显示Bmp图片
最近有同学问我如何实现MFC基于对话框在图片控件中加载图片?其实使用MFC显示图片的方法各种各样,但是还是有些同学不知道怎样显示.以前在<数字图像处理>课程中完成的软件都是基于单文档的程序 ...

Html Picture

Html Picture相关推荐

最新文章

热门文章