如何使用HTML5 实现响应式图像（更新）
自适应设计可能会保留下来，但是要使图像具有响应性 ，就需要解决许多问题。 尽管响应式图像会根据视口大小自动调整大小（从技术上讲这很容易），但用户面临的一个问题是， 当图像变得太小时，图像的声音点将变得几乎看不见 。
Web开发人员之间的理想共识是， 实际尺寸也应该响应 。 浏览器应能够根据视口大小加载较小或较大的图像。 这样，我们可以指导并提供最佳的图像比例，而不是缩小的图像（如图所示）。
这就是HTML5 picture元素出现的地方。该picture使我们能够提供多个图像源，并通过媒体查询控制投放。 让我们看看它是如何完成的，对吧？
推荐读物：提供 真实响应式图像的5种方法
入门
我准备了三个不同维度的图像，如下所示。 已裁切图像以保留对图像中人物的聚焦。 这里的计划是在小屏幕上显示最小尺寸，在大屏幕上显示较大图像。
使用图片元素
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 垫片它。
最后，查看演示并下载下面的源代码。