0

我看过不少 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 标签> 来实现这一点？我需要 ul 来适应图片，以便 li 悬停在其中。

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

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

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

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

4

1 回答 1

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:contain 或 background-image:cover 微调背景图像如何适应空间。

几个链接，其中包含有关您可以使用此操作的更多详细信息：http:
//www.w3schools.com/cssref/css3_pr_background-size.asp
http://css-tricks.com/perfect-full-page-background-图片/

祝你好运！

于 2013-08-23T16:02:29.030 回答