(六)：picture元素

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-6-picture-element/

在第3，4，5部分中，我們專注于分辨率切換的解決方案。現(xiàn)在是時候來研究如何解決藝術(shù)指導(dǎo)了。

<picture>元素——尤其是媒體屬性——被設(shè)計來簡化藝術(shù)指導(dǎo)。

<picture>元素包含一系列<source>子元素后跟著需要的<img>元素。source元素原理和video元素的子源類似。

<picture>
  <source media="(min-width: 900px)" srcset="cat-vertical.jpg">
  <source media="(min-width: 750px)" srcset="cat-horizontal.jpg">
  <img src="cat.jpg" alt="cat">
</picture>

每個源必須有一個srcset屬性，可選屬性包括media，sizes和type。<source>元素上的sizes和srcset的使用和<img>上完全一樣。

我們現(xiàn)在主要研究media屬性。

media屬性

media屬性的值是媒體查詢。與sizes屬性的媒體情況不同，這里的媒體查詢是你熟知并喜愛的且功能完整。

當(dāng)瀏覽器檢查source元素列表時，使用第一個媒體查詢匹配的源。如果沒有媒體查詢匹配，則使用<img>元素。

media屬性是指令，而不是建議

不像是srcset和sizes，當(dāng)使用媒體屬性，你在告訴瀏覽器應(yīng)該使用哪個源。

瀏覽器無法自由選擇一個不同源。它必須使用第一個媒體屬性匹配當(dāng)前瀏覽器狀況的第一個<source>元素。

這就是帶有媒體屬性的<picture>元素非常適合藝術(shù)指導(dǎo)的原因。在藝術(shù)指導(dǎo)的使用情況中，設(shè)計師必須確保在特定視口尺寸下使用的圖片與他們預(yù)期的一致否則設(shè)計可能會被破壞。

讓我們來實際看一下。

實際情況下的picture元素

Shopify?使用<picture>元素來解決藝術(shù)指導(dǎo)的問題。Shopify’s在主頁上突出了一個顧客，Corrine Anestopoulos，Biko?Jewelry的聯(lián)合創(chuàng)始人。

在狹窄的屏幕上，Anestopoulos小姐的照片被裁減。因為圖片不再是被簡單縮小，這就是考慮到藝術(shù)指導(dǎo)的情況。

Shopify使用的標(biāo)記將<picture>元素和srcset顯示密度描述符結(jié)合。我為了簡化標(biāo)記而移除了冗長的圖片路徑并總結(jié)如下：

<picture>
  <source srcset="homepage-person@desktop.png, homepage-person@desktop-2x.png 2x"       
          media="(min-width: 990px)">
  <source srcset="homepage-person@tablet.png, homepage-person@tablet-2x.png 2x" 
          media="(min-width: 750px)">
  <img srcset="homepage-person@mobile.png, homepage-person@mobile-2x.png 2x" 
       alt="Shopify Merchant, Corrine Anestopoulos">
</picture>

注：新改版的頁面代碼：

<picture class="">
  <!--[if IE 9]><video style="display: none;"><![endif]-->
  <source srcset="muttonhead-feature@desktop-a97f32476dec8ace5bff5581de852720.png 1x, muttonhead-feature@desktop-2x-9dfadafd12daaa37357521b5cfeb71c9.png 2x" media="(min-width: 990px)">
  <source srcset="muttonhead-feature@tablet-098c9c293a9fc4625c4e3881c293d284.png 1x, muttonhead-feature@tablet-2x-9e850f53007aca09e7c3b58d7b6d2ba1.png 2x" media="(min-width: 750px)">
  <!--[if IE 9]></video><![endif]-->
  <img srcset="muttonhead-feature@mobile-46b2bcd7fba4a422861fece5231085a3.png 1x, muttonhead-feature@mobile-2x-4e12c2522c827b69b53ad706aeaf6ba9.png 2x" alt="Shopify online store" class="">
</picture>

縮小你的瀏覽器窗口大小，你能看到圖片的更換過程

仔細觀察這些代碼，Shopify使用了三個不同的圖片斷點。每個斷點的圖片寬度固定－斷點間的寬度轉(zhuǎn)變是跳躍的而不是連續(xù)的。

因為圖片寬度固定，[srcset顯示密度描述符]((http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html)就派上作用。因此對于每個斷點來說，Shopify定義了一個`1`倍和一個`2`倍源文件。分解開來如下所示：

• <source … media="(min-width: 990px)">:最大尺寸的圖片，Shopify把它稱為桌面，是第一個圖片源。媒體屬性告訴瀏覽器這個源只有在視口寬度大于或等于990px才被使用。
• <source … media="(min-width: 750px)">:第二個源，“平板”圖片，視口寬度大于或等于750px時使用。因為第一個源在990px時起作用并且瀏覽器選擇匹配的第一個源，第二個源的有效視口寬度范圍是750px到989px。
• <img>:如果前兩個源沒有匹配，說明視口寬度一定小于750px。這種情況下，會使用<img>元素上srcset。小屏幕會使用”移動設(shè)備”圖片。

如果圖片寬度自適應(yīng)而不固定，Shopify本可以使用帶srcset寬度描述符的<picture>而不是顯示密度描述符。

最后一點小技巧

遇到藝術(shù)指導(dǎo)的情況，你會需要picture元素。另外picture規(guī)范的創(chuàng)造者還給網(wǎng)頁開發(fā)帶來了一份最終的大禮。在下一節(jié)中，將會向大家介紹圖片的新格式相關(guān)知識，將帶領(lǐng)大家進入圖片格式的新世界之中。