Question

我在gridView（表格）中有一个图像，根据屏幕分辨率，它有不同数量的列。像这样的Html代码：

正如您所看到的，我在＆＃39; ld＆＃39;决议;第4栏＆＃39; md＆＃39;解析度 ;等...

最后，我的图像image_resolution_XXX.jpg的实际/显示分辨率并不是事先知道的。这取决于设备的屏幕分辨率（以及因此我网格的列数）。

我的图片根据其分辨率存储在我的服务器上的不同文件夹中：文件夹＆＃39; 128x128＆＃39; 256x256＆＃39;等...

我想要的是避免在我的gridView中加载大分辨率图像（例如：image_resolution_512.jpg），如果只需要更小的分辨率（例如：image_resolution_256.jpg）。另外，如果需要更高的分辨率，我想避免加载小分辨率图像。

如何在加载时加载正确的分辨率？

也许简化的方法是为xs设备定义XXX像素的图像分辨率，为md设备定义YYY像素的图像分辨率......是否可能？

感谢您的帮助！

Answer 1

你可以做一些......

<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文件管理您想要在图像容器中显示的图像？

Answer 2

如果是<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">

对于没有srcset支持的浏览器似乎有polyfill

如果是CSS，请使用媒体查询。

Html：在页面加载时加载方便的图像大小？

2 个答案: