Question

我正在尝试在小屏幕上显示特定的图像，并在更大的屏幕上显示不同的图像。

我知道这可以通过媒体查询来实现，但即使显示设置为无，我也担心这两个图像都会下载。

我知道srcset，但担心它在IE中不受支持。

我也花了一些时间在谷歌搜索，但这个主题的所有帖子似乎都是4岁。

那么，处理多个图像并显示/隐藏不同屏幕大小的现代方法是什么，而不下载隐藏的图像？

Answer 1

您可以将te图像定义为DIV的背景图像。然后使用移动优先方法使用媒体查询，例如

.my_div1 {
  display: none;
  background-image: none;
}
@media screen and (min-width: 768px) {
  .my_div1 {
    display: block;
    background-image: url(image1.png);
  }
}

只有当屏幕为＆gt; = 768px时，才会加载图像。

Answer 2

您可以使用polyfill来支持IE： https://github.com/aFarkas/respimage

根据屏幕大小隐藏图像并阻止它们下载？

2 个答案: