如何在流體佈局中使用HTML img srcset？

我有一個網頁設計，其中的佈局大小和圖像大小是基於em的。例如：如何在流體佈局中使用HTML img srcset？

<html style="width:50em; font-size:16pt"> 
    <body> 
    <p>Lorem ipsum 
     <img src="..." style="float:right; width:20em"> 
    </p> 
    </body> 
</html>

由於圖像大小是在em中指定的，因此它始終與文本大小保持一致。不幸的是，我們不知道一張圖片有多少CSS像素。我們不知道的圖像有多少設備像素寬的，這取決於全角的大小，放大倍率等

的<img>srcset和sizes屬性似乎接近我想要的解決方案。但我不確定這是否適用於我的情況。我可以生成多種資產大小，例如320×240,480×360,640×480等

我想讓網絡瀏覽器查看<img>元素的內容框，計算它的寬度，並下載最合適的圖像從一個備選方案列表。我該怎麼做？

注意：我的確讀過srcsetx語法，但它似乎並不是正確的工具。

來源

2017-08-15 Nayuki

我學到了很多通過檢查[CSS技巧]（https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/）文章。圖像尺寸是否與視口一起縮放，或者通過媒體查詢與尺寸保持一致？ –

我包含的代碼基本上代表了整個情況。我不做媒體查詢或基於視口的圖像縮放。 – Nayuki

您可以使用％或vw單位的最小寬度和最大寬度來確保它適合屏幕範圍。你有沒有試圖設置這些？ ..除了srcet，否則你可以擺脫：寬度XXem？ *他們不關心視口* –

Srcset絕對是一個很好的方法來解決這個問題。基本上，您可以將多幅圖像保存爲多種尺寸，通常情況下，您希望圖像的寬度儘可能與元素的寬度相同。然後，您爲每個屏幕寬度設置要使用的圖像。

<img src="image.jpg" alt="Name" 
    srcset=" 
    /img-2400.jpg 2400w, 
    /img-1800.jpg 1800w, 
    /img-1200.jpg 1200w, 
    /img-900.jpg 900w, 
    /img-600.jpg 600w, 
    /img-400.jpg 400w" 
    sizes = "(min-width: 2400px) 900px, 
      (min-width: 1800px) 600px, 
      (min-width: 1200px) 500px, 
      (min-width: 900px) 500px, 
      (min-width: 600px) 600px, 
      400px" />

所以/img-2400.jpg 2400w將使用/img-2400.jpg當屏幕最接近2400px寬。

在sizes屬性中，還可以指定圖像大小是否在特定的屏幕大小下，因爲它可能不總是100％的瀏覽器寬度。

所以(min-width: 2400px) 900px告訴瀏覽器，當窗口寬度至少爲2400px時，屏幕上的圖像寬度爲900px。所以這應該是告訴瀏覽器然後抓取/img-900.jpg當窗口是2400px寬因爲該圖像設置爲900w這是最接近900px（其確切）。

如果您使用的是em，通過將您使用的em乘以16（這可能取決於您在css中實施的瀏覽器設置或設置），您仍然可以近似計算此值。所以如果你設置你的圖像在css中的寬度爲20em，那就是16 * 20 = 320px。

當這些結合使用時，現代瀏覽器應該能夠根據屏幕尺寸檢測出最佳圖像。瀏覽器兼容srcset在這裏：https://caniuse.com/#search=srcset

來源

2017-08-15 18:22:28

如何在流體佈局中使用HTML img srcset？

回答

相關問題