android - 背景图像并不总是居中

Question

我正在为我的期末元素制作一个网站，现在正在进行最后的润色。我使用 bootstrap 编写它并使用了网格:.col-sm现在我要确保它在所有屏幕分辨率下看起来都一样。

我通过我的 LG4 进入该网站，这是 View :

但是当在我的电脑上使用 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;

它将背景宽度缩放到视口(viewport)的宽度，因此图像不会在任何支持视口(viewport)单位的设备(93% 的设备)上水平裁剪。