Question

我正在为响应式图像寻找一种非常简单的方法。

网站即时建设有巨大的背景图片，我需要为桌面保留这些图片。

然而，这些太大而无法在平板电脑/手机上使用。似乎如果我将图像缩小到50％大小，它们将适用于所有屏幕。

有两种简单的方法可以在两个不同的文件夹中放置两组图像，然后根据使用的浏览器选择文件夹吗？

干杯

Answer 1

使用媒体查询来表示2组图像（以及更多）。例如：

#myBg {
    background-image: url('bigVersion.jpg');
}
@media (max-width: 600px) {
  #myBg {
    background-image: url('smallerVersion.jpg');
  }
}

简单示例，当窗口宽度超过600px及以下时显示两个不同的图像。你可以用它做更多的事情。