溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹HTML中如何根據屏幕大小，加載不同大小的圖片，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
引言今天要介紹的東西，很簡單，但是對于前端響應式的時候是個很重要的知識；我們在用bootstrap這類前端框架時，雖然頁面局部通過media query實現了，頁面始終無滾動條，響應式頁面。但是，bootstrap里面的img-responsive類只是通過設置圖片100%，并沒有真正的實現在手機上和電腦端加載不同大小的圖片。
代碼其實很簡單
<!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>
下面是在瀏覽器中的結果，我們打開Chrome瀏覽器，按f12后查看網絡請求。
首先是三張圖片
pic1.png
默認情況下，屏幕全屏，寬度大于800
pic2.png
當頁面寬度在600px-800px（(600,800]）之間時
pic3.png
最后是頁面小于等于600px
pic4.png
針對上面的代碼，我們解釋一下：其中的img元素是默認情況下顯示的圖片源，在其上面的兩個source元素則是在特定媒體查詢（media queries）條件下顯示的圖片。
這樣我們只需要通過像寫熟悉的css的媒體查詢一樣寫代碼，就能實現根據瀏覽器窗口大小，動態加載圖片。在手機上，就不用加載一個電腦端才顯示的大圖。
GitHub上有位大神，基于以上的原則，編寫了一個picfill的項目，大家有興趣的可以去git上查看。
以上是“HTML中如何根據屏幕大小，加載不同大小的圖片”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
