Question

我查看了很多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>

这可能吗？有没有办法使用img标签实现这个＆gt;？我需要ul来适应图片，这样我可以坐在里面。

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

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

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

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

Answer 1

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

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;
}
}

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

您可以使用background-size：contains或background-image：cover来微调背景图像与空间的匹配方式。

有几个链接，详细说明了你可以用它做什么：
http://www.w3schools.com/cssref/css3_pr_background-size.asp
http://css-tricks.com/perfect-full-page-background-image/

祝你好运！

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

1 个答案: