android - CSS“背景尺寸：封面”不适用于Android设备

Question

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

我background-size: cover;在 CSS 中使用。在浏览器和 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 为中心。

非常感谢任何帮助。谢谢。

标签： androidhtmlcssionic4

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%; 

}