CSS“背景大小：封面”不适用于Android设备

Question

我正在使用Ionic 4 Angular应用程序并设置<ion-slide>的样式以显示背景。

我在CSS中使用background-size: cover;。在浏览器和iOS设备上，一切看起来都很完美，但是在Android设备上运行时，背景无法正确显示。我已经附上了一些屏幕截图，供参考。

HTML：

<ion-slide class="step-two">
    <div class="slide-container">
      <h1>Find</h1>
      <p>Tap into stockists and discover where to buy your favourite beers.</p>
      <ion-img class="swipe-img" src="../../assets/imgs/swipe.svg"></ion-img>
    </div>
  </ion-slide>

CSS：

.step-two {
    background: linear-gradient(rgba(121, 168, 226, .9), rgba(0, 0, 0, .7)), url("../../assets/imgs/onboarding-bg2.jpg") no-repeat center;
    background-size: cover;
    color: var(--ion-color-primary-contrast);
}
.slide-container {
    width: 80%;
}

在iOS设备上正确显示：

在Android设备上显示不正确：

我试图像这样设置幻灯片的高度：

.step-two {
    background: linear-gradient(rgba(121, 168, 226, .9), rgba(0, 0, 0, .7)), url("../../assets/imgs/onboarding-bg2.jpg") no-repeat center;
    background-size: cover;
    color: var(--ion-color-primary-contrast);
    height: 100%; // This didn't work. The height was less than the view height of the device (about 30% in fact). Also tried 100vh which filled the view height but didn't fix the cover issue.
}

除了封面尺寸不正确外，似乎背景图片也未在Android上居中显示。

任何帮助，不胜感激。谢谢。

Answer 1

不要使用背景大小作为“封面”，而应使用“ 100％100％”。这将根据容器设置图像的100％宽度和100％高度。像这样：

background-size:100% 100%;

示例：

.step-two {
background: linear-gradient(rgba(121, 168, 226, .9), rgba(0, 0, 0, .7)), url("../../assets/imgs/onboarding-bg2.jpg") no-repeat center;
background-size: 100% 100%;
color: var(--ion-color-primary-contrast);
height: 100%; 

}