设置网站响应式背景图片全宽和全高

编程问答 2022-11-20

问题描述

我有一个带有背景图像的网站，它通过纯 css（background-image 等属性）填充整个背景。该图像是内部包含大量文本的图像，因此我选择了 PNG 格式，并且我可以为 2500 像素宽度版本实现的最小文件大小为 1.4MB。所有其他大小的版本都低于 1 MB。我为响应而存储的宽度大小是：

2500 像素、2000 像素、1500 像素、1000 像素、750 像素、500 像素

我的问题是；对它们的响应能力进行编码的最佳方法是什么？我读过一些帖子，通常的 min-width 媒体查询会在每个跨越断点的调整大小事件上下载一个新图像，这可能不是最佳的。我遇到了 min-device-width，要做某事：

#background {
  background-image: url(500px_version.png);
}

@media (min-device-width:500px) {
  
  #background {
    background-image: url(750px_version.png);
  }

}

@media (min-device-width:750px) {
  
  #background {
    background-image: url(1000px_version.png);
  }

}

@media (min-device-width:1000px) {
  
  #background {
    background-image: url(1500px_version.png);
  }

}

优点是这不会与视口相关，而是与设备本身相关。例如，如果您缩小大型笔记本电脑的浏览器窗口，它不会在跨越断点时重新下载图像，从而避免不必要的下载。

有趣的是，MDN 评论此功能已被弃用，而 canIuse 甚至没有找到它。这不是最好的方式吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

backgroundbackgroundbackgroundbackground-imagehtmlresponsiveness