简单的响应图像方法

Simple responsive images method

本文关键字：方法 图像 响应 简单      更新时间：2023-09-26

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

我正在建设的网站有巨大的背景图像，我需要保持桌面

然而，这些太大了，无法在平板电脑/手机上运行。似乎如果我把图片缩小到50%，它们就能在所有屏幕上显示了。

是否有任何简单的方法在两个不同的文件夹中有两组图像，然后根据所使用的浏览器选择文件夹?

欢呼

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

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

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

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

相关文章：