仅在移动设备上加载背景图像答案

【问题标题】：Background-image load on mobile device only仅在移动设备上加载背景图像
【发布时间】：2018-09-29 18:36:31
【问题描述】：

我正在尝试找到有关 div 的解决方案。我希望文本位于背景图像的中间。在我的代码中，文本和背景故意只显示一个小屏幕。我尝试了 text-align center 和 vertical-align: middle 但它没有达到预期的结果。有人可以知道如何管理代码吗？

#yourimage {
  background-image: none;
}

#yourimage p{
  display:none;
}
    
@media (max-width: 500px) {
  #yourimage {
    background-image: url('http://placehold.it/350x150/f22/fff');
    background-size:cover;
    background-image: block;
  }
  
  #yourimage p{
  display:block;
  vertical-align: middle;
}
}

<DIV id="yourimage">
<p>
Resize your browser window to see the image
</p>
</div>

【问题讨论】：

因为你使用的是@media
@MrLister 你是对的。

标签： html css media-queries background-image responsive

【解决方案1】：

你也必须使用 webkit。为了浏览器兼容性。请找到以下解决方案。

#yourimage {
  display:none;
}
    
@media (min-width: 100px) {
  #yourimage {
      width:350px;
      height:150px;
      display:flex;
	  display: -webkit-flex; /* Safari */
      align-items:center;
	  -webkit-align-items: center; /* Safari 7.0+ */
      justify-content:center;
	  -webkit-justify-content:center;
      background: url('http://placehold.it/350x150/f22/fff');
      background-size:cover;
  }
}

<div id="yourimage">
  <p>
    Resize your browser window to see the image
  </p>
</div>

希望这会有所帮助。

【讨论】：

【解决方案2】：

您还需要给 div 一个固定的宽度和高度。这段代码应该可以解决问题。将项目居中对齐的一个好方法是使用 CSS Flex。

此外，没有background-image: block; CSS 属性。

#yourimage {
  display:none;
}
    
@media (min-width: 100px) {
  #yourimage {
      width:350px;
      height:150px;
      display:-webkit-box;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-align:center;
      -ms-flex-align:center;
      align-items:center;
      -webkit-box-pack:center;
      -ms-flex-pack:center;
      justify-content:center;
      background: url('http://placehold.it/350x150/f22/fff');
      background-size:cover;
  }
}

<div id="yourimage">
  <p>
    Resize your browser window to see the image
  </p>
</div>

【讨论】：

如果我希望我的图片全屏显示，我必须设置固定的宽度和高度吗？

【解决方案3】：

你可以这样做：

* {box-sizing: border-box}
body {margin: 0}

#yourimage > p {
  display: none;
}
    
@media (max-width: 500px) {
  #yourimage {
    display: flex;
    justify-content: center; /* centers flex-items (children) horizontally */
    align-items: center; /* and vertically */
    background: url('http://placehold.it/350x150/f22/fff') no-repeat center center;
    background-size: cover;
    width: 350px;
    max-width: 100%; /* responsiveness */
    height: 150px;
    margin: 0 auto; /* horizontally centered on the page */
  }
  #yourimage > p {
    display: block;
  }
}

<div id="yourimage">
  <p>Resize your browser window to see the image</p>
</div>

【讨论】：