image的srcset屬性

yzzz 發布于2019-08-01 14:59 / 3256人閱讀

摘要：所以就有了新的標準。代碼如下其中指定圖片的地址和對應的圖片質量。語法如下上面例子中的就是指默認顯示如果視區寬度大于則顯示。總結的屬性方便的解決了頁面圖片適應不同屏幕密度的情況。

介紹

響應式頁面中經常用到根據屏幕密度設置不同的圖片。這個時候肯定會用到image標簽的srcset屬性。srcset屬性用于設置不同屏幕密度下，image自動加載不同的圖片。用法如下：

使用上面的代碼，就能實現在屏幕密度為1x的情況下加載image-128.png, 屏幕密度為2x時加載image-256.png。

新標準

按照上面的實現，不同的屏幕密度都要設置圖片地址，目前的屏幕密度有1x,2x,3x,4x四種，如果每一個圖片都設置4張圖片的話，太麻煩了。所以就有了新的srcset標準。代碼如下：

其中srcset指定圖片的地址和對應的圖片質量。sizes用來設置圖片的尺寸零界點。
對于srcset里面出現了一個w單位，可以理解成圖片質量。如果可視區域小于這個質量的值，就可以使用，當然，瀏覽器會自動選擇一個最小的可用圖片。
sizes語法如下：

sizes="[media query] [length], [media query] [length] ... "

上面例子中的sizes就是指默認顯示128px, 如果視區寬度大于360px, 則顯示340px。

總結

img的srcset屬性方便的解決了頁面圖片適應不同屏幕密度的情況。目前除了IE沒有兼容到，已經全部都兼容了，可以放心使用。

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/49694.html

圖片懶加載的前世今生

摘要：配置項配置項中的參數有以下三個所監聽對象的具體祖先元素，默認是計算交叉狀態時，將附加到祖先元素上，從而有效的擴大或者縮小祖先元素判定區域設置一系列的閾值，當交叉狀態達到閾值時，會觸發回調函數。一、前言 ??通常情況下，HTML 中的圖片資源會自上而下依次加載，而部分圖片只有在用戶向下滾動頁面的場景下才能被看見，否則這部分圖片的流量就白白浪費了。 ??所以，對于那些含有大量圖片資源的網...

zhaot 2019-08-23 16:13 評論0 收藏0
(譯)響應式圖片— srcset 和 sizes 屬性

摘要：在響應式網頁設計的革命中，圖片看起來是被浪潮落下的一個事物。元素展示了很多改變這個局面的希望，但無論元素是否可以完全使用，現在有兩個對于響應式圖片很關鍵的兩個屬性和。在響應式網頁設計的革命中，圖片看起來是被浪潮落下的一個事物。直到最近，根據不同的屏幕尺寸和像素密度來提供不同的圖片還是沒有完全實現。元素展示了很多改變這個局面的希望，但無論picture元素是否可以完全使用，現在有兩個...

stefanieliang 2019-08-30 12:46 評論0 收藏0
(譯)響應式圖片— srcset 和 sizes 屬性

摘要：在響應式網頁設計的革命中，圖片看起來是被浪潮落下的一個事物。元素展示了很多改變這個局面的希望，但無論元素是否可以完全使用，現在有兩個對于響應式圖片很關鍵的兩個屬性和。在響應式網頁設計的革命中，圖片看起來是被浪潮落下的一個事物。直到最近，根據不同的屏幕尺寸和像素密度來提供不同的圖片還是沒有完全實現。元素展示了很多改變這個局面的希望，但無論picture元素是否可以完全使用，現在有兩個...

alogy 2019-08-01 15:04 評論0 收藏0