响应式图像_如何使用HTML5 实现响应式图像（更新）

自适应设计可能会保留下来，但是要使图像具有响应性 ，就需要解决许多问题。 尽管响应式图像会根据视口大小自动调整大小（从技术上讲这很容易），但用户面临的一个问题是， 当图像变得太小时，图像的声音点将变得几乎看不见 。

Web开发人员之间的理想共识是， 实际尺寸也应该响应 。 浏览器应能够根据视口大小加载较小或较大的图像。 这样，我们可以指导并提供最佳的图像比例，而不是缩小的图像（如图所示）。

这就是HTML5 picture元素出现的地方。该picture使我们能够提供多个图像源，并控制通过媒体查询进行的投放。 让我们看看它是如何完成的，对吧？

入门

我准备了三个不同维度的图像，如下所示。 已裁切图像以保留对图像中人物的聚焦。 这里的计划是，我们将在小屏幕上显示最小的尺寸，在大屏幕上显示更大的图像。

使用图片元素

Picturefill可以通过两种方式工作：我们可以将srcset嵌入img标签或使用picture元素。 在这里，我们将选择picture元素，因为它更易于管理，更易于理解并且更具可读性。

类似于video和audio元素， picture将指向图像源的多个source元素包装起来，如下所示。

<picture>
	<source srcset="img/person-xsmall.jpg" media="(max-width: 480px)">
	<source srcset="img/person-small.jpg" media="(max-width: 640px)">
	<source srcset="img/person-med.jpg">
	<img srcset="img/person-med.jpg" alt="">
</picture>

从上面的代码片段中可以看到， source元素是通过media属性设置的。 在此属性中，我们指定应该在其上显示图像的视口断点。 您可以立即看到效果。

签出演示页面 ，并调整视口大小，您应该在指定的视口宽度内找到显示的图像。

浏览器支持

现在，每种浏览器都支持HTML5 picture元素，包括Microsoft Edge和移动浏览器。 但是，如果必须支持不支持此元素的旧浏览器（例如Internet Explorer），则可以使用 polyfill Picturefill 。

Picturefill是由Filament Group开发JavaScript库。 它允许我们现在使用picture元素。 首先，将脚本下载到Github存储库中 ，然后将picturefill.js或picturefill.min.js放入。 您可以简单地将其添加到head标签中。

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

最终思想

picture元素是HTML5中的一个重要补充。 它提供了对浏览器应在特定视口大小上显示的图像大小的更多控制。 图片元素可在所有最新的浏览器中使用，WordPress自WordPress 4.4起就包含了它。 如果你需要支持旧的浏览器，如Internet Explorer不支持的picture元素，你可以用Picturefill 垫片它。

最后，查看演示并下载下面的源代码。

• 演示版
• 下载源

翻译自: https://www.hongkiat.com/blog/html5-picture/