Question

我不想在mobil设备上加载图像，只能在桌面上加载我写了以下代码：
CSS

@media only screen and (max-width: 480px) {
div#line1 {display: none}
}

HTML

<div id="line1" style=" background-image:url(/background.jpg);">
<img src="/head.jpg" />
</div>

图片background.jpg未加载，但图片head.jpg
如果我添加

div#line1 img {display: none} // for < 480 px

同样的。 Image head.jpg加载在小分辨率屏幕上如何防止加载head.jpg以节省带宽？

PS：我在Chrome浏览器上测试过

Answer 1

您可以查看setting the image source in css，并将该css放入媒体查询中。

在html中，没有任何图像源，那么你的css就是这样的 - 只为非移动设备设置源：

A->B

您可能需要稍微调整一下才能使其发挥作用。

另外，你应该真正看看链接的问题 - 关于使用这种方法的后果有很多讨论 - 以及很多不应该使用它的情况。

Answer 2

如果是修改标记的选项，则只需将<img />标记替换为等效的<div>，然后设置background-image，就像使用#line1一样元件。

<div id="line1" style=" background-image:url(/background.jpg);">
  <div class="inner-image></div>
</div>

或者您使用<picture>元素并使用max-width条件设置适当的来源：

<picture>
  <source srcset="/head.jpg" media="(max-width: 480px)">
  <img src="/dummy-image.jpg" />
</picture>

Answer 3

您需要做的就是添加{b}图片高度min-height。隐藏子元素时，父级的高度（在这种情况下为div＃bg）将使用内部最高元素进行更新，因此如果没有元素，则高度为0（零）

＆＃13;

@media only screen and (max-width: 480px) {
  img#head {display: none}
  div#bg {min-height: 150px;}
}

＆＃13;

<div id="bg" style="background-image:url(http://placehold.it/350x150?text=bg); background-repeat:no-repeat;">
  <img id="head" src="http://placehold.it/350x150?text=head" />
</div>

＆＃13;

未使用display：none加载图像

3 个答案: