响应式图像

最新推荐文章于 2024-08-13 08:18:56 发布

放肆の微笑

最新推荐文章于 2024-08-13 08:18:56 发布

阅读量287

点赞数 1

文章标签：响应式图像 picturefill

响应式图像

前言
Picturefill.js

前言

什么是响应式图像呢，你可以这样理解，在不同设备，有着良好的显示效果，图像可以根据不同设备去变化，就可以理解为“响应式图像”

废话不多说，直接开始吧，下面给大家们介绍了2个方法
1.JavaScript 和 CSS 都可以实现
2.Picturefill.js 来实现
这2个道理都是一样的，标签引入了srcset 和sizes的这个属性

Picturefill.js

Picturefill发展是赞助细丝集团和Bocoup，并通过保持Picturefill队。正在进行的项目讨论是通过Slack进行的。

下载Picturefill

斜体样式版本3是Picturefill代码库的完全重写，具有优化的性能，更好的本机行为仿真，以及更加贴近规范的解析器。它还处理许多与第一代本机实现相关的怪癖，缺点和边缘情况。

PICTUREFILL 3.0.2版（稳定版 )
picturefill.js（开发版，未经授权的代码）
picturefill.min.js（生产版，缩小代码）
github
原网站

使用入门

要开始使用Picturefill，请下载上面列出的文件之一，并head使用以下代码从HTML文档的部分引用它：

    <script src="picturefill.js"></script>

为了更有效地加载页面，我们建议您async也为该script标记添加属性。这告诉浏览器它可以异步加载图片填充，而无需在加载文档的其余部分之前等待它完成。如果添加此属性，则需要在script标记之前添加一行脚本，以允许旧版浏览器识别picture元素，如果它们在picturefill加载完成之前在页面中遇到它们。
使用方法：

    <head>
      <script>
        // Picture element HTML5 shiv
        document.createElement( "picture" );
      </script>
      <script src="picturefill.js" async></script>
    </head>

标签的用法

一旦你包含picturefill.js，你就可以开始向你的网站添加响应式图像元素了！Picturefill增加了对整套响应式图像解决方案的支持，包括picture元素和新img元素属性。

响应式图像规范的某些功能组合解决了许多不同的用例 -这些是一些最常见的用例：

我想仅向具有高像素密度视口的用户提供高分辨率资产

使用srcset属性
srcset属性（无sizes）被用来服务于较大但其他方面相同的图像源以仅仅高分辨率显示器。

	    <img srcset="examples/images/image-384.jpg 1x, examples/images/image-768.jpg 2x" alt="…">

如果安装了固有维度插件：2x源将自动缩小2 - 这样图像将占用布局中与图像相同的空间1x，但2x源将以像素密度的两倍显示。这仅适用于通过CSS调整图像的自然大小，img或者width内容属性将按预期运行。

我希望浏览器为用户的像素密度和布局中的图像大小选择最佳图像源。

使用srcset和sizes属性
这些srcset和sizes语法用于为浏览器提供一个图像源列表，这些图像源的大小相同（相同的宽高比，相同的焦点）以及它们将如何显示，然后允许浏览器选择最适合的源用户的当前视口大小，显示密度以及页面布局中该图像的大小

     	<img
      sizes="(min-width: 40em) 80vw, 100vw"
      srcset="examples/images/medium.jpg 375w,
              examples/images/large.jpg 480w,
              examples/images/extralarge.jpg 768w"
      alt="…">

该sizes语法用于定义你的形象会在你的布局占据的空间。srcset然后定义图像列表及其固有宽度。这允许浏览器为布局的该部分中可用的大小选择最小的适当源，而不仅仅是视口大小。

我需要我的图像源才能在我定义的特定断点处进行更改。

使用picture元素
picture当您需要显式控制在设置视口大小时显示哪个源时，将使用该元素。
该picture元素需要比上面的示例更多的标记，但它允许您使用CSS3 Media Queries等功能将图像源与不同大小，缩放级别和宽高比配对，以及设计中的布局条件。但是，它不应该用于服务于完全不同的图像源 - 所有的源都必须用alt内部的属性来描述img。

    <picture>
      <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
      <source srcset="examples/images/art-large.jpg" media="(min-width: 800px)">
      <img srcset="examples/images/art-medium.jpg" alt="…">
    </picture>

您的picture元素应包含一系列source元素，后跟img元素。每个source元素必须具有一个srcset属性，指定一个或多个图像URL源（如果需要可以使用扩展的srcset语法进行分辨率切换），该img元素应具有srcset属性以用于回退目的（某些浏览器，如Android 2.3的赢取’看到source元素）。此外，您可以添加media包含CSS3媒体查询的sizes属性和/或要配对的属性srcset。

第一个source具有media与用户上下文匹配的属性将决定img结尾处元素的src ，因此您在使用min-width媒体查询时会首先显示更大的选项（如下面的示例所示），并且在使用max-width媒体时会持续使用更大的选项查询。由于这些图像源是为了与布局断点对齐，srcset的缓存行为，并为潜在的带宽或用户偏好覆盖不适用于此。

为了解决兼容问题，ie9一下的老版本

    <picture>
      <!--[if IE 9]><video style="display: none;"><![endif]-->
      <source srcset="examples/images/extralarge.jpg" media="(min-width: 1000px)">
      <source srcset="examples/images/large.jpg" media="(min-width: 800px)">
      <!--[if IE 9]></video><![endif]-->
      <img srcset="examples/images/medium.jpg" alt="…">
    </picture>

我需要特定的图像断点，每个断点都有多个分辨率选项。

MEDIA和SRCSET语法
1x/ 2x可使用语法内source元件srcset作为用于更复杂的分辨率的媒体的查询的速记属性。

     <picture>
      <source srcset="examples/images/large.jpg, examples/images/extralarge.jpg 2x" media="(min-width: 800px)">
      <img srcset="examples/images/small.jpg, examples/images/medium.jpg 2x" alt="…">
    </picture>

我想只为支持它们的浏览器提供更新的图像格式。

picture中的type属性
该types属性仅用于向支持该格式的浏览器发送备用图像源格式，而不向浏览器发送备用源。与现有解决方案不同，该picture元素使用单个请求进行这些协商。

Picturefill支持SVG和WebP作为其核心的一部分，但可以通过“typesupport”插件使用以下MIME类型：

image/bmp
image/xbmp
image/jp2
image/vnd.ms-photo
video/vnd.mozilla.apng

     <picture>
      <source srcset="examples/images/large.webp" type="image/webp">
      <img srcset="examples/images/large.jpg" alt="…">
    </picture>

Picturefill功能

Picturefill.js公开了一个全局函数：picturefill()函数。picturefill()在页面加载时自动调用一次或多次，并且在调整浏览器窗口大小时（或在方向更改时）也会触发它。您也可以picturefill()随时在JavaScript中运行该函数，这在对DOM进行更新或与您的应用程序相关的条件发生变化时可能很有用：