HTML5中picture元素響應(yīng)式處理圖片的示例分析

這篇文章主要介紹了HTML5中picture元素響應(yīng)式處理圖片的示例分析，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

響應(yīng)式設(shè)計(jì)

所謂的響應(yīng)式設(shè)計(jì)，是指在不同的屏幕分辨率，不同的像素密度比，不同寬度的終端設(shè)備中，網(wǎng)頁(yè)布局可以自適應(yīng)的調(diào)整。響應(yīng)式設(shè)計(jì)的本意是使原本PC上的網(wǎng)站兼容移動(dòng)終端，大部分響應(yīng)式網(wǎng)頁(yè)是通過(guò)媒體查詢(xún)，加載不同樣式的CSS文件實(shí)現(xiàn)的。這樣的彈性化布局使網(wǎng)站在不同的設(shè)備終端布局都比較合理。

雖然響應(yīng)式設(shè)計(jì)的好處多多，但是也有諸多缺陷。由于PC端和移動(dòng)終端訪問(wèn)的是同一個(gè)網(wǎng)站，PC端可以不計(jì)較流量限制，但是移動(dòng)端不可能不計(jì)較。

為適配不同終端機(jī)型的屏幕寬度和像素密度，我們一般會(huì)使用如下方法設(shè)置圖片的CSS樣式：

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

將圖片的最大寬度設(shè)置為100%，以確保圖像不會(huì)超出其父級(jí)元素的寬度，如果父級(jí)元素的寬度發(fā)生改變，圖片的寬度也隨之改變，height：auto 可以確保圖片的寬度發(fā)生改變時(shí)，圖片的高度會(huì)依據(jù)自身的寬高比例進(jìn)行縮放。

這樣當(dāng)我們?cè)谝苿?dòng)設(shè)備上訪問(wèn)響應(yīng)式網(wǎng)頁(yè)里的圖片時(shí)，只是把圖片的分辨率做了縮放，下載的還是PC端的那張大圖，這樣不僅浪費(fèi)流量，而且浪費(fèi)帶寬，而且會(huì)拖慢網(wǎng)頁(yè)的打開(kāi)速度，嚴(yán)重影響用戶(hù)的使用體驗(yàn)。

新的解決方案：<picture>

1. <picture>是HTML5的一個(gè)新元素；

2. 如果<picture>元素與當(dāng)前的<audio>,<video>元素協(xié)同合作將增強(qiáng)響應(yīng)式圖像工作的進(jìn)程，它允許在其內(nèi)部設(shè)置多個(gè)<source>標(biāo)簽，以指定不同的圖像文件名，根據(jù)不同的條件進(jìn)行加載；

3. <picture>可以根據(jù)不同的條件加載不同的圖像，這些條件可以是視窗當(dāng)前的高度（viewport），寬度（width），方向（orientation），像素密度（dpr）等；

舉幾個(gè)栗子

如下栗子中針對(duì)不同屏幕寬度加載不同的圖片；當(dāng)頁(yè)面寬度 在320px到640px之間時(shí)加載minpic.png；當(dāng)頁(yè)面寬度大于640px時(shí)加載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.如下栗子中添加了屏幕的方向作為條件；當(dāng)屏幕方向?yàn)闄M屏方向時(shí)加載_landscape.png結(jié)尾的圖片；當(dāng)屏幕方向?yàn)樨Q屏方向時(shí)加載 _portrait.png結(jié)尾的圖片；

<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.如下栗子中添加了屏幕像素密度作為條件；當(dāng)像素密度為2x時(shí)加載_retina.png 2x 的圖片，當(dāng)像素密度為1x時(shí)加載無(wú)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.如下栗子中添加圖片文件格式作為條件,當(dāng)支持webp格式圖片時(shí)加載webp格式圖片，當(dāng)不支持時(shí)加載png格式圖片；

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

5.如下例子中添加寬度描述；頁(yè)面會(huì)根據(jù)當(dāng)前尺寸選擇加載不大于當(dāng)前寬度的最大的圖片；

<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屬性；當(dāng)窗口寬度大于等于800px時(shí)加載對(duì)應(yīng)版本的圖片；

<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 對(duì)其兼容性較好，具體兼容性如圖：

優(yōu)點(diǎn)：

1. 加載適當(dāng)大小的圖像文件，使可用帶寬得到充分利用；

2. 加載不同剪裁并具有不同橫縱比的圖像，以適應(yīng)不同寬度的布局變化；

3. 加載更高的像素密度，顯示更高分辨率的圖像；

步驟：

1. 創(chuàng)建<picture></picture>標(biāo)簽；

2. 在這些標(biāo)簽內(nèi)創(chuàng)建一個(gè)你想用來(lái)執(zhí)行任何一個(gè)特性的<source></scource>標(biāo)簽；

3. 添加一個(gè)media屬性，用來(lái)包含你想要的特性，如寬度（max-width，min-width），方向（orientation）等；

4. 添加一個(gè)srcset屬性，屬性值為相應(yīng)的圖像文件名稱(chēng)，進(jìn)行加載。如果你想提供不同的像素密度，例如Retina顯示屏，可以添加額外的文件名到srcset屬性中；

5. 添加一個(gè)回退的<img>標(biāo)簽；

<picture>的工作原理

<picture>語(yǔ)法

由上面的示例代碼可知，在沒(méi)有引入js和第三方庫(kù)，CSS中沒(méi)有包含media queries的情況下，<picture>元素可以實(shí)現(xiàn)只用HTML來(lái)聲明響應(yīng)式圖片；

<source>元素

<picture>標(biāo)簽它本身沒(méi)有屬性。神奇的地方是<picture>被用來(lái)當(dāng)做<source>的容器。
<source>元素，是用來(lái)加載多媒體的比如視頻和音頻，已經(jīng)被更新用到圖片的加載并且一些新的屬性已經(jīng)被添加：

srcset (必需)

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

或者是逗號(hào)分隔的用像素密度描述的圖片路徑(如：srcset=”img/minpic.png,img/minpic_retina.png 2x”),1x 的描述是默認(rèn)不使用的。

media (可選)

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

在之前的<picture>語(yǔ)法的例子里已經(jīng)用到了。

sizes（可選）

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

或者逗號(hào)分隔的media query對(duì)寬度的描述(如：sizes=”(min-width: 320px) 100vw, (min-width: 640px) 50vw, calc(33vw - 100px)”) 最后的一個(gè)被當(dāng)做默認(rèn)的。

type(可選)

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

瀏覽器會(huì)根據(jù)這些提示和屬性來(lái)加載確切的圖片資源。根據(jù)標(biāo)簽的列表順序。瀏覽器會(huì)使用第一個(gè)合適的<source>元素并忽略掉后面的<source>標(biāo)簽。

添加最后的<img>元素

<img>元素在<picture>內(nèi)部用來(lái)當(dāng)瀏覽器不支持時(shí)或者沒(méi)有源標(biāo)簽匹配時(shí)的顯示。在<picture>內(nèi)使用<img>標(biāo)簽是必須得，如果你忘記了，將不會(huì)有圖片顯示出來(lái)。

用<img>來(lái)聲明默認(rèn)的圖片顯示。將<img>標(biāo)簽放到<picture>內(nèi)的最后，瀏覽器在找到<img>標(biāo)簽之前會(huì)忽略<source>的聲明。這個(gè)圖片標(biāo)簽也需要你寫(xiě)上它的alt屬性。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“HTML5中picture元素響應(yīng)式處理圖片的示例分析”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!