javascript - 简单的响应式图片方法

Question

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

我正在 build 的网站有巨大的背景图片，我需要为桌面保留这些图片。

但是，这些对于平板电脑/手机来说太大了。似乎如果我将图像缩小到 50%，它们将适用于所有屏幕。

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

干杯

Answer 1

使用媒体查询来表示 2 组图像(以及更多)。例如:

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

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

在此处阅读有关媒体查询的更多信息:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries