詳解HTML5中的picture元素響應式處理圖片

所謂的響應式設計，是指在不同的螢幕分辨率，不同的像素密度比，不同寬度的終端設備中，網頁佈局可以自適應的調整。響應式設計的本意是使原本PC上的網站相容於行動終端，大部分的響應式網頁是透過媒體查詢，載入不同樣式CSS檔案實現。這樣的彈性化佈局使網站在不同的設備終端佈局都比較合理。

雖然響應式設計的好處多多，但也有許多缺陷。由於PC端和行動終端存取的是同一個網站，PC端可以不計較流量限制，但是行動端不可能不計較。

為適合不同終端機型的螢幕寬度和像素密度，我們一般會使用以下方法設定圖片的CSS樣式：

 <style> img{ max-width:100%; height:auto; }</style>

將圖片的最大寬度設為100%，以確保影像不會超出其父級元素的寬度，如果父級元素的寬度發生改變，圖片的寬度也隨之改變，height：auto 可以確保圖片的寬度改變時，圖片的高度會依據自身的寬高比例進行縮放。

這樣當我們在行動裝置上存取響應式網頁裡的圖片時，只是把圖片的解析度做了縮放，下載的還是PC端的那張大圖，這樣不僅浪費流量，而且浪費頻寬，而且會拖慢網頁的開啟速度，嚴重影響使用者的使用體驗。

1. <picture>是HTML5的一個新元素；
2. 如果<picture>元素與目前的<audio>,<video>元素協同合作將增強響應式映像工作的進程，它允許在其內部設定多個<source>標籤，以指定不同的映像檔名，根據不同的條件進行載入；
3. <picture>可以根據不同的條件載入不同的影像，這些條件可以是視窗目前的高度（viewport），寬度（width），方向（orientation），像素密度（dpr）等；

如下栗子中針對不同螢幕寬度載入不同的圖片；當頁寬在320px到640px之間時載入minpic.png；當頁寬大於640px時載入middle.png

 <picture> <source media=(min-width: 320px) 與 (max-width: 640px) srcset=img/minpic.png> <source media=(min-width: 640px) srcset=img/middle.png> < img src=img/picture.png <source media=(min-width: 320px) 與 (max-width: 640px) 與 (orientation: landscape) srcset=img/minpic_landscape.png> <source media=(min-width: 320px) and (max-width: 640px) and (orientation: portra) =img/minpic_portrait.png> <source media=(min-width: 640px) 與 (orientation: landscape) srcset=img/middlepic_landscape.png> <source media=(min-width: 640px) and (orientation: portrait) srcset=img/middlepic_portrait. src=img/picture.png <source media=(min-width: 320px) and (max-width: 640px) srcset=img/minpic.png,img/minpic_retina.png 2x> <source media=(min-width: 640px) srcset=png ,img/middle_retina.png 2x> <img src=img/picture.png,img/picture_retina.png 2x <source type=image/webp srcset=img/picture.webp> <img src=img/picture.png sizes=90vw srcset=picture-160.png 160w,png 160w圖-320.png 320w,圖-640.png 640w, 圖-1280.png 1280w>

6.如下範例中加入sizes屬性；當視窗寬度大於等於800px時載入對應版本的圖片；

 <source media=(min-width: 800px) sizes=90vw srcset=picture-landscape-640.png 640w, picture-landscape-1280.png 1280w, picture-landscape-2560.png 2560w>w .png sizes=90vw srcset=picture-160.png 160w, picture-320.png 320w, picture-640.png 640w, picture-1280.png 1280w>

相容性:

目前只有Chrome ， Firefox ， Opera 對其相容性較好，具體相容性如圖：

1. 加載適當大小的圖像文件，使可用頻寬得到充分利用；
2. 載入不同剪裁並具有不同橫縱比的圖像，以適應不同寬度的佈局變化；
3. 加載更高的像素密度，顯示更高解析度的圖像；

1. 建立<picture></picture>標籤；
2. 在這些標籤內建立一個你想用來執行任何一個特性的<source></scource>標籤；
3. 加入一個media屬性，用來包含你想要的特性，如寬度（max-width，min-width），方向（orientation）等；
4. 新增一個srcset屬性，屬性值為對應的圖片檔案名稱，進行載入。如果你想提供不同的像素密度，例如Retina顯示屏，可以添加額外的檔名到srcset屬性中；
5. 新增一個回退的<img>標籤；

由上面的範例程式碼可知，在沒有引入js和第三方函式庫，CSS中沒有包含media queries的情況下，<picture>元素可以實作只用HTML來宣告響應式圖片；

<picture>標籤它本身沒有屬性。神奇的地方是<picture>被用來當做<source>的容器。

<source>元素，是用來加載多媒體的例如視頻和音頻，已經被更新用到圖片的加載並且一些新的屬性已經被添加：

接受單一的圖片檔案路徑(如：srcset=img/minpic.png).

或是逗號分隔的用像素密度描述的圖片路徑(如：srcset=img/minpic.png,img/minpic_retina.png 2x)​​,1x 的描述是預設不使用的。

接受任何驗證的media query,你可以看到在CSS @media選擇器(如：media=(min-width: 320px)).

在之前的<picture>語法的例子裡已經用到了。

接收單一的寬度描述(如：sizes=100vw)或單一的media query寬度描述(如：sizes=(min-width: 320px) 100vw).

或逗號分隔的media query對寬度的描述(如：sizes=(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)) 最後的一個被當作預設的。

接受支援的MIME類型(如: type=image/webp or type=image/vnd.ms-photo)

瀏覽器會根據這些提示和屬性來載入確切的圖片資源。根據標籤的列表順序。瀏覽器會使用第一個適當的<source>元素並忽略掉後面的<source>標籤。

<img>元素在<picture>內部用來當瀏覽器不支援時或沒有來源標籤匹配時的顯示。在<picture>內使用<img>標籤是必須得，如果你忘記了，將不會有圖片顯示出來。

用<img>來宣告預設的圖片顯示。將<img>標籤放到<picture>內的最後，瀏覽器在找到<img>標籤之前會忽略<source>的聲明。這個圖片標籤也需要你寫上它的alt屬性。

文中藉鏡了許多其他的文章，到這裡針對picture的所有介紹就結束了，那麼現在就去試試它吧~

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。