溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

HTML中如何根據(jù)屏幕大小，加載不同大小的圖片

發(fā)布時(shí)間：2021-03-02 11:47:04 來(lái)源：億速云 閱讀：558 作者：小新 欄目：web開(kāi)發(fā)

這篇文章主要介紹HTML中如何根據(jù)屏幕大小，加載不同大小的圖片，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

引言今天要介紹的東西，很簡(jiǎn)單，但是對(duì)于前端響應(yīng)式的時(shí)候是個(gè)很重要的知識(shí)；我們?cè)谟胋ootstrap這類(lèi)前端框架時(shí)，雖然頁(yè)面局部通過(guò)media query實(shí)現(xiàn)了，頁(yè)面始終無(wú)滾動(dòng)條，響應(yīng)式頁(yè)面。但是，bootstrap里面的img-responsive類(lèi)只是通過(guò)設(shè)置圖片100%，并沒(méi)有真正的實(shí)現(xiàn)在手機(jī)上和電腦端加載不同大小的圖片。
代碼其實(shí)很簡(jiǎn)單

<!DOCTYPE html><html><head>    
<meta charset="UTF-8">    
<meta name="viewport" content="width=device-width,initial-scale=1">    
<title>Document</title>    
<script>        
document.createElement( "picture" );       
</script></head><body>    
<picture>            
<source srcset="pic1.png" media="(max-width: 600px)">            
<source srcset="pic2.png" media="(max-width: 800px)">            
<img srcset="pic3.png" alt="pic">        
</picture></body></html>

下面是在瀏覽器中的結(jié)果，我們打開(kāi)Chrome瀏覽器，按f12后查看網(wǎng)絡(luò)請(qǐng)求。

首先是三張圖片

pic1.png

默認(rèn)情況下，屏幕全屏，寬度大于800

pic2.png

當(dāng)頁(yè)面寬度在600px-800px（(600,800]）之間時(shí)

pic3.png

最后是頁(yè)面小于等于600px

pic4.png

針對(duì)上面的代碼，我們解釋一下：其中的img元素是默認(rèn)情況下顯示的圖片源，在其上面的兩個(gè)source元素則是在特定媒體查詢(xún)（media queries）條件下顯示的圖片。

這樣我們只需要通過(guò)像寫(xiě)熟悉的css的媒體查詢(xún)一樣寫(xiě)代碼，就能實(shí)現(xiàn)根據(jù)瀏覽器窗口大小，動(dòng)態(tài)加載圖片。在手機(jī)上，就不用加載一個(gè)電腦端才顯示的大圖。

GitHub上有位大神，基于以上的原則，編寫(xiě)了一個(gè)picfill的項(xiàng)目，大家有興趣的可以去git上查看。

以上是“HTML中如何根據(jù)屏幕大小，加載不同大小的圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

htm
AI
助
手