如何使用 HTML5 的picture元素处理响应式图片

来自： http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html

图片在响应式网页设计中是出了名的最具挑战性的方面之一。今天咱们就来看看如何使用 <picture> 元素来处理响应式图片.

让咱们先了解一下问题

固定宽度，像素完美的网站设计已经离咱们远去了。在宽屏显示器，互联网电视，多尺寸的平板电脑和智能手机的今天，咱们的设计必须应付一切可能，将宽由 320px 向 7680px 转变。

伴随这种多分辨率风景而至的，是须要拉伸或收缩图像，以适应这些不一样的要求。这能够被理解为以下问题，矢量图形出现异常时，绝大多数具备特定像素的图像宽度并不改变。

因此，咱们应该怎么作呢?

目前最多见的解决方案

做为通常规则，你会在任何响应式网站中发现如下CSS样式:

img { max-width: 100%; height: auto; }

此代码使用 max-width:100% 的设置，以确保图像永远不会超越其父容器的宽度。若是父容器的宽度收缩小于图像的宽度，图像将随之缩小。 height:auto 的设置能够确保当有这种状况发生时，图像将以自身的宽高比保留。

这解决了一方面的问题，使咱们可以在许多不一样的状况下显示相同的图像。不过，这并不能让咱们对不一样的状况指定不一样的图像。

新的解决方案： <picture>

<picture> 是HTML5一个新的元素。

若是 <picture> 元素与当前的 <audio> 和 <video> 元素协同合做将大大加强响应式图像的工做进程。它容许你放置多个 source 标签，以指定不一样的图像文件名，进而根据不一样的条件进行加载。

它可让你根据如下条件加载彻底不一样的图像：

• 媒体特性结果如：视口的当前高度(viewport height)，宽度(width)，方向(orientation)。
• 像素密度

反过来这也意味着您能够：

• 加载适当大小图像的文件，使可用带宽获得充分利用。
• 加载不一样裁剪并具备不一样纵横比的图像，以适合于不一样宽度的布局变化。
• 加载更高的像素密度，显示更高分辨率的图像。

• <picture> 的工做原理

  <picture> 基本工做步骤以下：

  • 建立 <picture></picture> 标签。
  • 在这些标签内建立一个你想用来执行任何一个特性的 <source> 元素。
  • 添加一个 media 属性，用来包含你想要的特性，如视口的当前高度(viewport height)，宽度( width )，方向(orientation)等。
  • 添加一个 srcset 属性与相应的图像文件名相匹配，进行加载。若是你想提供不一样的像素密度，例如Retina显示屏，你能够添加额外的文件名到你的 srcset 属性中，
  • 添加一个回退的 <img> 元素。

  这里有一个简单的基本的例子，用来检查视口是否小于 768px ，若是小于的话就加载一个较小的图像：

• <picture>
      <source srcset="smaller.jpg" media="(max-width: 768px)">
      <source srcset="default.jpg">
      <img srcset="default.jpg" alt="My default image">
  </picture>

  你可能会注意到，在 media 属性使用的语法与建立CSS媒体特性中使用的语法同样。您可使用相同的特性，这意味着你能够查询 max-width ， min-width ， max-height ， min-height ， orientation 等属性。

  同时，您也可使用这些特性判断设备的方向，从而加载横向或纵向版本的图像，同时您也能够进行大小特性的混合。例如：

• <picture>
      <source srcset="smaller_landscape.jpg" media="(max-width: 40em) and (orientation: landscape)">
      <source srcset="smaller_portrait.jpg" media="(max-width: 40em) and (orientation: portrait)">
      <source srcset="default_landscape.jpg" media="(min-width: 40em) and (orientation: landscape)">
      <source srcset="default_portrait.jpg" media="(min-width: 40em) and (orientation: portrait)">
      <img srcset="default_landscape.jpg" alt="My default image">
  </picture>

• 上面的代码实现了能够在一个小的景观设备上加载小的，景观裁剪图像的版本。在大的景观设备上加载大的相同的图像版本。

  这样，在小尺寸的小型设备上，或在大尺寸的大型设备上，该设备能够自主进行图像主导从而加载不一样图像剪裁的版本。

  若是您想为更高密度的显示器提供不一样分辨率的图像版本，能够经过在 srcset 属性中添加额外的文件名来实现。例如，让咱们来看看屏幕像素密度为 2x 的Retina 代码处理片段：

• <picture>
      <source srcset="smaller.jpg, smaller_retina.jpg 2x" media="(max-width: 768px)">
      <source srcset="default.jpg, default_retina.jpg 2x">
      <img srcset="default.jpg, default_retina.jpg 2x" alt="My default image">
  </picture>

  <picture> 元素如今的使用状况

  如今，Chrome，Firefox和Opera浏览器都已经实现了对 <picture> 元素的支持。在不久的未来，在其余浏览器也将获得普遍的支持。但如今这一时刻尚未来临。

  与此同时，若是你如今就想使用 <picture> 元素可能还须要等待。你也可使用 Picturefill2.0 ; Filament 成员 提供的一个polyfill。

• 经过下载并添加 picturefill.js 文件到您项目的头部就能够实现：

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

  还有你能够经过异步加载脚原本增长效率，你能够参考 Picturefill的文档 。

  有了这个脚本加载，除了少数的限制， <picture> 元素将如我所讲的运行。

  Picturefill的限制

  IE9

  Picturefill在其余的IE版本均可以正常工做，可是IE9却不能识别被包裹在 picture 标签中的 source 元素。为了解决这个问题，在 video 标签内包住你的源元素，这就会使他们在IE9中被识别，例如：

• <picture>
      <!--[if IE 9]><video style="display: none;"><![endif]-->
      <source srcset="smaller.jpg" media="(max-width: 768px)">
      <source srcset="default.jpg">
      <!--[if IE 9]></video><![endif]-->
      <img srcset="default.jpg" alt="My default image">
  </picture>

  Android 2.3

  和IE9同样，Android 2.3识别不了在 picture 元素中 source 元素。然而，在使用常规的 img 标签时，它就能够识别 srcset 属性。为了不在Android 2.3及任何有相同问题的其余浏览器中出现此问题，确保在 srcset 属性中存在默认用于回退的 img 元素的文件名。

  须要JavaScript和本地媒体特性的支持

  有了这个基于JavaScript的解决方案，所以在浏览器中须要支持JavaScript。 Picturefill 2.0不提供“no-js”的解决方法，由于若是这样，当原生浏览器支持 <picture> 元素时，将会出现多个图像。可是，若是“no-js”是你的不二选择，你必须使用Picturefill 1.2。

  Picturefill另一个要求就是须要本地媒体特性的支持，从而使 media 属性中的特性可以正常工做。全部现代浏览器都支持媒体特性，IE8和以及更低版本的浏览器是剩下的惟一不支持的 用户群 。

  可能存在的额外HTTP请求

  在原生支持 srcset 元素，但不支持 picture 元素的浏览器中，和回退的 img 元素中指定的文件名可能会被提早调用，从而会在 source 元素中肯定一个更好的拟合图片。

  这只是一个暂时的问题，一旦本地支持 picture 元素就会自行消失。

  更多信息

  • 了解更多关于Picturefill 2.0的信息并在 Picturefill网站上 下载下来用于您的项目上。
  • 从 responsiveimages.org 获取关于 <picture> 元素的信息。

  今天在您的项目中就尝试使用 <picture> 元素，看看是否实现了预期功能！

  本文根据 @Kezz Bracey 的《 Quick Tip: How to Use HTML5 “picture” for Responsive Images 》所译，整个译文带有咱们本身的理解与思想，若是译得很差或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-responsive-images--cms-21015 。

   

   

  转载地址：http://www.open-open.com/lib/view/open1455928865808.html