html - 响应图像 - 不同屏幕尺寸上的不同图像

Question

您好社区，在此先感谢您的帮助。 我的问题如下，我想在计算机屏幕上显示一些图像，但在移动设备上将这些图像切换为仅一个合成图像。这是我的代码:

@media screen and (max-width:480px) {
    .hidden_mobile {
        display:none;
        background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
 	background-repeat: no-repeat;
	background-size: contain;
    }
}

<div class="col-sm-1">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
<div class="col-sm-2">
<img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" style="display: block; width: 100%; height: auto; margin: 0 auto 15px" alt="">
</div>
</div>
<div class="col-sm-1">
</div>

到目前为止，它可以在计算机上运行，​​但在移动设备上则不行。它只是将图像显示在彼此之上。

谢谢

Answer 1

这里有两个问题:

1) 您试图在移动设备中隐藏的元素有一个内联 display:block 覆盖样式表中的 display:none。这就是为什么您一直在移动设备中看到图像的原因。在下面的运行片段中，我删除了所有内联样式，并将边距移动到样式表中的一个类。 您可以在此处阅读有关 CSS 规则特异性的更多信息:https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

2) 即使您删除了内联样式，您也不会看到您想要的背景图像，因为您将它添加到具有 display:none 的元素中。您需要将该背景图像添加到我在类 .mobile_only 中创建的另一个元素。

通过在下面的代码片段中应用这 2 个更改，您可以根据屏幕的分辨率看到不同的图像。

.hidden_mobile {
height: auto; width: 100%; margin: 0 auto 15px; 
}
@media screen and (max-width:480px) {
  .hidden_mobile {
    display: none;
  }
  .mobile_only {
    height: 250px;
    background-image: url("http://julienleveau.com/wp-content/uploads/2018/04/Mobile-version.jpg");
    background-repeat: no-repeat;
    background-size: contain;
  }
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="col-sm-1">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/top100.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/WW-1.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/fearless.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/bowp-300-1.jpg" alt="">
</div>
<div class="col-sm-2">
  <img class="hidden_mobile" src="http://julienleveau.com/wp-content/uploads/2018/04/ispwp.jpg" alt="">
</div>
</div>
<div class="col-sm-1">
</div>
   <div class="mobile_only"></div>
</div>