【发布时间】：2015-12-22 09:43:44
【问题描述】：
在开发网站时，我经常使用背景图片作为横幅。当此网站在 CMS 中时，图像路径来自数据库（用户上传）。所以我最终使用了style="background-image:url(myImageFromDB.jpg)"
但是，当我想用相同图像的较小版本替换此图像时，这会成为一个问题。
那里有很多教程/指南，假设您已经知道此图像的路径，因此您可以使用@media 查询轻松替换它们。但是如果路径是动态的，那么我就不能使用媒体查询（除非它们是动态写入文档头部的）。
那么人们是如何处理这个问题的呢？
- 不使用背景图像？ （改为使用？）
- 在文档开头动态编写媒体查询？
- 使用JS动态加载正确的图片？
- 在服务器上动态调整图像大小？
每种方法的缺点： 1. 缺点，不能使用一些好的选项比如 background-size:cover 2.需要编写服务器端脚本来确定要加载什么图像 3.可能是最好的选择，但需要先等待JS加载 4. 我试过这个，但没有多大成功。
【问题讨论】：
-
另一个要添加到您的列表中：css-tricks.com/…。这是一个最近的规范，所以还没有很多浏览器支持。还有一些很好的 JS 库可以处理这个问题。这真的取决于你想要支持什么。
-
我更喜欢 JS 选项，并为 bg 图像使用自制的 srcset 库。创建后备很容易，图像是异步的，并且可以设置为立即加载或使用类似航点的方式加载，这对性能有好处。
-
@SimonGooder 我以前读过那篇文章。不幸的是，不是只处理 img 标签的背景图像。
标签： html css image responsive-design media-queries