Html：在頁面加載時加載方便的圖像大小？

我有一個gridView（表）中的圖像，根據屏幕分辨率，它有不同數量的列。 HTML代碼是這樣的：Html：在頁面加載時加載方便的圖像大小？

正如你所看到的，我對 'LD' 第6列; 'md'分辨率的4列; etc ...

最後，我的圖像image_resolution_XXX.jpg的實際/顯示分辨率並未真正預知。它取決於設備的屏幕分辨率（以及因此我的網格列數）。

我的圖片是根據其分辨率存儲在我的不同文件夾服務器上：文件夾「128×128」，「256×256」，等...

我想是爲了避免我的GridView控件加載大分辨率的圖片（例如：image_resolution_512.jpg）如果只需要較小的分辨率（例如：image_resolution_256.jpg）。另外，如果需要更高的分辨率，我想避免加載小分辨率圖像。

如何在加載時加載正確的分辨率？

也許一個簡單的方法是爲xs設備定義XXX像素的圖像分辨率，以及爲md設備定義YYY像素等等......這可能嗎？

感謝您的幫助！

來源

2015-10-22 Regis_AG

也許CSS媒體查詢可以幫助你做到這一點。 – Shilly

您的HTML代碼從問題中缺失。 – Tony

你可以做線沿線的東西...

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="css/ldpi.css" /> 
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="css/mdpi.css" /> 
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="css/hdpi.css" /> 
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="css/retina.css" />

然後就是管理要通過每個不同的CSS文件中的圖像容器以顯示什麼樣的圖像？

來源

2015-10-22 15:10:47 AdamJeffers

這項工作的圖像內CSS。如果HTML頁面中有標籤？ –

如果是<img>，請使用srcset屬性。

MDN documentation的例子：

<img src="clock-demo-thumb-200.png" 
    alt="Clock" 
    srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w" 
    sizes="(min-width: 600px) 200px, 50vw">

似乎是瀏覽器polyfill沒有srcset支持

在CSS的情況下，使用媒體查詢。

來源

2015-10-22 16:11:04 Tony

Html：在頁面加載時加載方便的圖像大小？

回答

相關問題