如何使用 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