搜尋
首頁web前端css教學HTML5中的picture元素響應式處理圖片方法

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

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

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

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

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

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

新的解決方案:

  1. #是HTML5的新元素;

  2. 如果元素與當前的

  3. 可以根據不同的條件載入不同的映像,這些條件可以是視窗目前的高度(viewport),寬度(width ),方向(orientation),像素密度(dpr)等;

舉幾個栗子

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

<picture>
    <source>
    <source>
    <img  src="/static/imghwm/default1.png" data-src="img/picture.png" class="lazy" alt="HTML5中的picture元素響應式處理圖片方法" >
</source></source></picture>

2.如下栗子中新增了螢幕的方向作為條件;當螢幕方向為橫屏方向時載入_landscape.png結尾的圖片;當螢幕方向為垂直螢幕方向時載入_portrait.png結尾的圖片;

<picture>
    <source>
    <source>
    <source>
    <source>
    <img  src="/static/imghwm/default1.png" data-src="img/picture.png" class="lazy" alt="HTML5中的picture元素響應式處理圖片方法" >
</source></source></source></source></picture>

3.如下栗子中加入了螢幕像素密度作為條件;當像素密度為2x時載入_retina.png 2x 的圖片,當像素密度為1x時載入無retina後綴的圖片;

<picture>
    <source>
    <source>
    <img  src="/static/imghwm/default1.png" data-src="img/picture.png,img/picture_retina.png 2x" class="lazy" alt="HTML5中的picture元素響應式處理圖片方法" >
</source></source></picture>

4.如下栗子中新增圖片檔案格式作為條件,當支援webp格式圖片時載入webp格式圖片,當不支援時載入png格式圖片;

<picture>
    <source>
    <img  src="/static/imghwm/default1.png" data-src="img/picture.png" class="lazy" alt="HTML5中的picture元素響應式處理圖片方法" >
</source></picture>

5.如下範例中新增寬度描述;頁面會根據目前尺寸選擇載入不大於目前寬度的最大的圖片;

<img  src="/static/imghwm/default1.png" data-src="picture-160.png" class="lazy" alt="HTML5中的picture元素響應式處理圖片方法" >

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


<img  src="/static/imghwm/default1.png" data-src="picture-160.png" class="lazy" alt="HTML5中的picture元素響應式處理圖片方法" >

相容性:

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

#優點:

  1. 載入適當大小的映像文件,使可用頻寬充分利用;

  2. 載入不同剪裁並具有不同橫縱比的圖像,以適應不同寬度的佈局變化;

  3. 載入更高的像素密度,顯示更高解析度的圖片;

步驟:

  1. 建立標籤;

  2. 在這些標籤內建立一個你想用來執行任何一個特性的標籤;

#新增一個media屬性,用來包含你想要的特性,如寬度(max-width,min-width),方向(orientation)等;

新增一個srcset屬性,屬性值為對應的圖像檔案名稱,進行載入。如果你想提供不同的像素密度,例如Retina顯示屏,可以添加額外的文件名到srcset屬性中;


添加一個回退的HTML5中的picture元素響應式處理圖片方法標籤;## ##########的工作原理######語法######由上面的範例程式碼可知,在沒有引入js和第三方函式庫, CSS中沒有包含media queries的情況下,元素可以實作只用HTML來宣告響應式圖片;######元素######

標籤它本身沒有屬性。神奇的地方是被用來當的容器。
元素,是用來加載多媒體的例如視頻和音頻,已經被更新用到圖片的加載並且一些新的屬性已經被添加:

srcset (必需)

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

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

media (可選)

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

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

sizes(可選)

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

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

type(可選)

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

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

加入最後的HTML5中的picture元素響應式處理圖片方法元素

HTML5中的picture元素響應式處理圖片方法元素在內部用來當瀏覽器不支援時或沒有來源標籤符合時的顯示。在內使用HTML5中的picture元素響應式處理圖片方法標籤是必須得,如果你忘記了,將不會有圖片顯示出來。

HTML5中的picture元素響應式處理圖片方法來宣告預設的圖片顯示。將HTML5中的picture元素響應式處理圖片方法標籤放到內的最後,瀏覽器在找到HTML5中的picture元素響應式處理圖片方法標籤之前會忽略的聲明。這個圖片標籤也需要你寫上它的alt屬性。

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

#相關推薦;

#實例講解響應式框架Bootstrap柵格系統

幾款適合web程式設計師的響應式框架

##HTML5響應式banner製作教學

以上是HTML5中的picture元素響應式處理圖片方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
什麼是CSS網格?什麼是CSS網格?Apr 30, 2025 pm 03:21 PM

CSS網格是創建複雜,響應式Web佈局的強大工具。它簡化了設計,提高可訪問性並提供了比舊方法更多的控制權。

什麼是CSS Flexbox?什麼是CSS Flexbox?Apr 30, 2025 pm 03:20 PM

文章討論了CSS FlexBox,這是一種佈局方法,用於有效地對齊和分佈響應設計中的空間。它說明了FlexBox用法,將其與CSS網格進行了比較,並詳細瀏覽了瀏覽器支持。

我們如何使用CSS使網站迅速響應?我們如何使用CSS使網站迅速響應?Apr 30, 2025 pm 03:19 PM

本文討論了使用CSS創建響應網站的技術,包括視口元標籤,靈活的網格,流體媒體,媒體查詢和相對單元。它還涵蓋了使用CSS網格和Flexbox一起使用,並推薦CSS框架

CSS盒裝屬性有什麼作用?CSS盒裝屬性有什麼作用?Apr 30, 2025 pm 03:18 PM

本文討論了CSS盒裝屬性,該屬性控制了元素維度的計算方式。它解釋了諸如Content-Box,Border-Box和Padding-Box之類的值,以及它們對佈局設計和形式對齊的影響。

我們如何使用CSS動畫?我們如何使用CSS動畫?Apr 30, 2025 pm 03:17 PM

文章討論使用CSS,關鍵屬性並與JavaScript結合創建動畫。主要問題是瀏覽器兼容性。

我們可以使用CSS向我們的項目添加3D轉換嗎?我們可以使用CSS向我們的項目添加3D轉換嗎?Apr 30, 2025 pm 03:16 PM

文章討論了Web項目的3D轉換,關鍵屬性,瀏覽器兼容性和性能注意事項的討論。 (角色計數:159)

我們如何在CSS中添加梯度?我們如何在CSS中添加梯度?Apr 30, 2025 pm 03:15 PM

文章討論了使用CSS梯度(線性,徑向,重複)來增強網站視覺效果,添加深度,焦點和現代美學。

CSS中的偽元素是什麼?CSS中的偽元素是什麼?Apr 30, 2025 pm 03:14 PM

文章討論了CSS中的偽元素,它們在增強HTML樣式方面的使用以及與偽級的差異。提供實用的例子。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

這個專案正在遷移到osdn.net/projects/mingw的過程中,你可以繼續在那裡關注我們。 MinGW:GNU編譯器集合(GCC)的本機Windows移植版本,可自由分發的導入函式庫和用於建置本機Windows應用程式的頭檔;包括對MSVC執行時間的擴展,以支援C99功能。 MinGW的所有軟體都可以在64位元Windows平台上運作。

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

將Eclipse與SAP NetWeaver應用伺服器整合。

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具