Question

我正在为我的最终项目建立一个网站，现在正在进行最后的工作。我用bootstrap编写了它并使用了网格：.col-sm 现在我确保它在所有屏幕分辨率下看起来都一样。

我是通过LG4进入网站的，这就是视图：

但是当我使用Chrome移动分辨率在我的电脑上查看网站时，它看起来更像我想要的方式：

这是css：

#index-wrap{
    background: url('pic/start.jpg') ;

    margin-bottom: 0;
    min-height: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;

    /*now:*/
     background-attachment: fixed;
}

.jumbotron {
    background-color: transparent; 
    color: #0E76BD; 
    text-align: center;
    height: 100vh;

}

这些是潜水等级：

<div id="index-wrap">
    <div class="jumbotron">

-----Site Content ------

    </div>
</div>

我如何解决这个问题？

Answer 1

使用background-size：cover作为

的后备

background-size: 100vw auto;

它会将背景宽度缩放到视口的宽度，因此图像不会在任何支持视口单元的设备上水平剪裁（93％的设备）。

Answer 2

最后，我裁剪了图像，并在每个设备中显示不同的图像：

@

media(max-width:767px){

   #index-wrap{
      background: url('pic/start2.jpg') ;
      margin-bottom: 0;
      min-height: 50%;
      background-repeat: no-repeat;
      background-position: center center;
      webkit-background-size: cover;
      background-size: cover;
   }

    .vertical-center > .container {
       max-width: 90%;
       min-height: 80%;
       display: inline-block;
       vertical-align: middle;  /* vertical alignment of the inline element */                       
       font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    }
}

在默认视图中：

   #index-wrap{
      background: url('pic/start.jpg') ;
      margin-bottom: 0;
      min-height: 50%;
      background-repeat: no-repeat;
      background-position: center center;
     -webkit-background-size: cover;
      background-size: cover;
   }

   .jumbotron {
      background-color: transparent; 
      color: #0E76BD; 
       text-align: center;
       height: 100vh;
   }

    .vertical-center {
        width:100%;
        min-height: 80%;
        text-align: center; 
        font: 0/0 a;         
    }

    .vertical-center:before { 
        content: " ";
        display: inline-block;
        vertical-align: middle;    /* vertical alignment of the inline element */
        height: 100%;
    }

    .vertical-center > .container {
        max-width: 100%;
        min-height: 75%;
        display: inline-block;
        vertical-align: middle;  
        font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

这是html层次结构：

<div id="index-wrap" >
   <div class="jumbotron vertical-center" >
      <div class="container">
.....
      </div>
   </div>
</div>

它不是很优雅，但它确实有效。我从here获取了解决方案，并更改了URL和容器最大宽度和高度。

背景图像并不总是居中

2 个答案: