圖片是響應(yīng)式網(wǎng)頁設(shè)計最具挑戰(zhàn)性的一大問題。今天我們就來看看如何使用<picture>元素來處理響應(yīng)式圖片.
讓我們先了解一下問題
固定寬度，像素完美的網(wǎng)站設(shè)計已經(jīng)離我們遠(yuǎn)去了。在寬屏顯示器，互聯(lián)網(wǎng)電視，多尺寸的平板電腦和智能手機(jī)的今天，我們的設(shè)計必須應(yīng)付一切可能，將寬由320px向7680px轉(zhuǎn)變。
伴隨這種多分辨率風(fēng)景而至的，是需要拉伸或收縮圖像，以適應(yīng)這些不同的要求。這可以被理解為如下問題，矢量圖形出現(xiàn)異常時，絕大多數(shù)具有特定像素的圖像寬度并不改變。
所以，我們應(yīng)該怎么做呢?
目前最常見的解決方案
作為一般規(guī)則，你會在任何響應(yīng)式網(wǎng)站中發(fā)現(xiàn)以下CSS樣式:
img {
max-width: 100%;
height: auto;
}此代碼使用max-width:100%的設(shè)置，以確保圖像永遠(yuǎn)不會超越其父容器的寬度。如果父容器的寬度收縮小于圖像的寬度，圖像將隨之縮小。height:auto的設(shè)置可以確保當(dāng)有這種情況發(fā)生時，圖像將以自身的寬高比保留。
這解決了一方面的問題，使我們能夠在許多不同的情況下顯示相同的圖像。不過，這并不能讓我們對不同的情況指定不同的圖像。
新的解決方案：<picture>
<picture>是HTML5一個新的元素。
如果<picture>元素與當(dāng)前的<audio>和<video>元素協(xié)同合作將大大增強響應(yīng)式圖像的工作進(jìn)程。它允許你放置多個source標(biāo)簽，以指定不同的圖像文件名，進(jìn)而根據(jù)不同的條件進(jìn)行加載。
它可以讓你根據(jù)以下條件加載完全不同的圖像：
- 媒體特性結(jié)果如：視口的當(dāng)前高度(viewport height)，寬度(width)，方向(orientation)。
- 像素密度
反過來這也意味著您可以：
- 加載適當(dāng)大小圖像的文件，使可用帶寬得到充分利用。
- 加載不同裁剪并具有不同縱橫比的圖像，以適合于不同寬度的布局變化。
- 加載更高的像素密度，顯示更高分辨率的圖像。
<picture>的工作原理
<picture>基本工作步驟如下：
- 創(chuàng)建<picture></picture>標(biāo)簽。
- 在這些標(biāo)簽內(nèi)創(chuàng)建一個你想用來執(zhí)行任何一個特性的<source>元素。
- 添加一個media屬性，用來包含你想要的特性，如視口的當(dāng)前高度(viewport height)，寬度(width)，方向(orientation)等。
- 添加一個srcset屬性與相應(yīng)的圖像文件名相匹配，進(jìn)行加載。如果你想提供不同的像素密度，例如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屬性使用的語法與創(chuàng)建CSS媒體特性中使用的語法一樣。您可以使用相同的特性，這意味著你可以查詢max-width，min-width，max-height，min-height，orientation等屬性。
同時，您也可以使用這些特性判斷設(shè)備的方向，從而加載橫向或縱向版本的圖像，同時您也可以進(jìn)行大小特性的混合。例如：
<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>上面的代碼實現(xiàn)了可以在一個小的景觀設(shè)備上加載小的，景觀裁剪圖像的版本。在大的景觀設(shè)備上加載大的相同的圖像版本。
這樣，在小尺寸的小型設(shè)備上，或在大尺寸的大型設(shè)備上，該設(shè)備可以自主進(jìn)行圖像主導(dǎo)從而加載不同圖像剪裁的版本。
如果您想為更高密度的顯示器提供不同分辨率的圖像版本，可以通過在srcset屬性中添加額外的文件名來實現(xiàn)。例如，讓我們來看看屏幕像素密度為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>元素現(xiàn)在的使用情況
現(xiàn)在，Chrome，F(xiàn)irefox和Opera瀏覽器都已經(jīng)實現(xiàn)了對<picture>元素的支持。在不久的將來，在其他瀏覽器也將得到廣泛的支持。但現(xiàn)在這一時刻還沒有來臨。
與此同時，如果你現(xiàn)在就想使用<picture>元素可能還需要等待。你也可以使用Picturefill2.0;Filament 成員提供的一個polyfill。
通過下載并添加picturefill.js文件到您項目的頭部就可以實現(xiàn)：
<script src="picturefill.js"></script>
還有你可以通過異步加載腳本來增加效率，你可以參考Picturefill的文檔。
有了這個腳本加載，除了少數(shù)的限制，<picture>元素將如我所講的運行。
Picturefill的限制
IE9
Picturefill在其他的IE版本都可以正常工作，但是IE9卻不能識別被包裹在picture標(biāo)簽中的source元素。為了解決這個問題，在video標(biāo)簽內(nèi)包住你的源元素，這就會使他們在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元素。然而，在使用常規(guī)的img標(biāo)簽時，它就可以識別srcset屬性。為了避免在Android 2.3及任何有相同問題的其他瀏覽器中出現(xiàn)此問題，確保在srcset屬性中存在默認(rèn)用于回退的img元素的文件名。
需要JavaScript和本地媒體特性的支持
有了這個基于JavaScript的解決方案，因此在瀏覽器中需要支持JavaScript。 Picturefill 2.0不提供“no-js”的解決方法，因為如果這樣，當(dāng)原生瀏覽器支持<picture>元素時，將會出現(xiàn)多個圖像。但是，如果“no-js”是你的不二選擇，你必須使用Picturefill 1.2。
Picturefill另外一個要求就是需要本地媒體特性的支持，從而使media屬性中的特性能夠正常工作。所有現(xiàn)代瀏覽器都支持媒體特性，IE8和以及更低版本的瀏覽器是剩下的唯一不支持的用戶群。
可能存在的額外HTTP請求
在原生支持srcset元素，但不支持picture元素的瀏覽器中，和回退的img元素中指定的文件名可能會被提前調(diào)用，從而會在source元素中確定一個更好的擬合圖片。
這只是一個暫時的問題，一旦本地支持picture元素就會自行消失。
更多信息
了解更多關(guān)于Picturefill 2.0的信息并在Picturefill網(wǎng)站上下載下來用于您的項目上。
從responsiveimages.org獲取關(guān)于<picture>元素的信息。
今天在您的項目中就嘗試使用<picture>元素，看看是否實現(xiàn)了預(yù)期功能!
原文：Quick Tip: How to Use HTML5 “picture” for Responsive Images
譯文：http://www.w3cplus.com/html5/quick-tip-how-to-use-html5-picture-for-responsive-images.html?utm_source=tuicool&utm_medium=referral
作者：@靜-如秋葉