如何响应地加载图像，但将其用作css背景图像而不是<；img>；？

我看过很多polyfill插件，但它们似乎都依赖于根据媒体查询注入img标签

我想做的是加载不同大小的图像，但使用内联CSS将它们显示为无序列表上的背景图像

因此，大致上

@media (min-width: 768px)

<ul style="background-image:(path to medium image)">
     <li class="hover"></li>
     <li class="hover"></li>
</ul>

@media (min-width: 1280px)

<ul style="background-image:(path to large image)">
     <li class="hover"></li>
     <li class="hover"></li>
</ul>

@介质（最小宽度：768px）




@介质（最小宽度：1280px）

这可能吗？有没有办法使用img标签>？我需要ul来匹配图片，这样li悬停可以坐在里面

编辑-我正在考虑使用媒体查询直接在页面上添加样式块，以便使用服务器数据动态填充它们

<style>
@media (min-width: 768px) {
      .image { background-image: <%: model.small-image %>; }
}

@media (min-width: 1280px) {
      .image { background-image: <%: model.large-image %>; }
}
</style>

@介质（最小宽度：768px）{
.image{背景图像：；}
}
@介质（最小宽度：1280px）{
.image{背景图像：；}
}

---

这是一个可行的解决方案吗？

如果我正确理解了你的问题，那么下面的内容应该可以让你开始

HTML

<ul class="ul-background">
<li>one</li>
<li>two</li>
</ul>  

在智能手机/平板电脑/台式机上使用具有不同背景图像的不同媒体请求

通过使用“背景大小：包含”或“背景图像：封面”，可以微调背景图像与空间的匹配方式

一些链接提供了有关如何使用此功能的更多详细信息：

---

祝你好运

听起来不错。你试过了吗？是的，似乎很管用。这看起来不是一个优雅的解决方案。我只是不知道怎么做，因为路径需要来自服务器模型。忘记“优雅”，不管这意味着什么。你的解决方案很完美。谢谢。我想这就是我要做的。我在一个页面上有几个图像，所以我必须使用服务器逻辑来动态创建css。我实际上在考虑使用服务器代码来生成这些样式作为外部样式表。>但是我在一个页面上有几个图像。。。如果您指的是几个

，每个都有不同的背景图像，那么您可以对每个列表使用不同的类，并为每个类指定不同的图像。除非我没有得到什么，否则你可以用一个静态的外部样式表来完成这一切。

@media (max-width: 767px) {

.ul-background{
background-image: url('path-to-tablet-image.jpg');
background-repeat:no-repeat;
background-size:contain;
}
}