【问题标题】: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>

    【讨论】:

      猜你喜欢
      • 2017-02-19
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-08-14
      • 2016-02-15
      • 2018-02-13
      • 2021-04-25
      • 2017-10-25
      相关资源
      最近更新 更多