HTML5中的picture元素響應式處理圖片方法

所謂的響應式設計，是指在不同的螢幕解析度，不同的像素密度比，不同寬度的終端裝置中，網頁布局可以自適應的調整。響應式設計的本意是使原本PC上的網站相容移動終端，大部分響應式網頁是通過媒體查詢，載入不同樣式的CSS檔案實現的。這樣的彈性化布局使網站在不同的裝置終端布局都比較合理。本文主要介紹了詳解HTML5中的picture元素響應式處理圖片，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望能協助到大家。

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

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

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

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

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

新的解決方案：<picture>

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) and (max-width: 640px)" srcset="img/minpic.png">    <source media="(min-width: 640px)" srcset="img/middle.png">    <img src="img/picture.png" alt="this is a picture"></picture>

2.如下栗子中添加了螢幕的方向作為條件；當螢幕方向為橫屏方向時載入_landscape.png結尾的圖片；當螢幕方向為豎屏方向時載入 _portrait.png結尾的圖片；

<picture>    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">    <source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">    <source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">    <source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">    <img src="img/picture.png" alt="this is a picture"></picture>

3.如下栗子中添加了螢幕像素密度作為條件；當像素密度為2x時載入_retina.png 2x 的圖片，當像素密度為1x時載入無retina尾碼的圖片；

<picture>    <source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png,img/minpic_retina.png 2x">    <source media="(min-width: 640px)" srcset="img/middle.png,img/middle_retina.png 2x">    <img src="img/picture.png,img/picture_retina.png 2x" alt="this is a picture"></picture>

4.如下栗子中添加圖片檔案格式作為條件,當支援webp格式圖片時載入webp格式圖片，當不支援時載入png格式圖片；

<picture>    <source type="image/webp" srcset="img/picture.webp">    <img src="img/picture.png" alt="this is a picture"></picture>

5.如下例子中添加寬度描述；頁面會根據當前尺寸選擇載入不大於當前寬度的最大的圖片；

<img src="picture-160.png" alt="this is a picture"     sizes="90vw"      srcset="picture-160.png 160w,             picture-320.png 320w,             picture-640.png 640w,             picture-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"><img src="picture-160.png" alt="this is a picture"     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>標籤；

<picture>的工作原理

<picture>文法

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

<source>元素

<picture>標籤它本身沒有屬性。神奇的地方是<picture>被用來當做<source>的容器。
<source>元素，是用來載入多媒體的比如視頻和音頻，已經被更新用到圖片的載入並且一些新的屬性已經被添加：

srcset (必需)

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

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

media (可選)

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

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

sizes（可選）

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

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

type(可選)

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

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

添加最後的<img>元素

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

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

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

相關推薦;

執行個體講解響應式架構Bootstrap柵格系統

幾款適合web程式員的響應式架構

HTML5響應式banner製作教程