背景图像"cover"和"center"在安卓上不起作用

Question

我遇到了这个问题，我有一个图像，我想获得div的全宽和全高，始终显示在图像的中心，它在桌面浏览器上非常适用，即使我将窗口调整为移动大小，但在安卓浏览器中，它总是显示图像的右侧，我无法实现它的工作。

这是代码：

<div class="main-content" style="background-image: url(<?php echo get_field('imagen_portada')?>)">

和CSS：

.main-content {
width: 100%;
background-size: cover;
background-position: center;
min-height: 100vh;
}

对我来说，这不起作用毫无意义。

编辑：顺便说一句，如果我使用"背景位置：左边"，图像会缩小，如果我用右边，图像根本不会显示，所有这些都在Chrome for Android中，在桌面浏览器中，一切都正常工作。

Answer 1

background-size: cover与background-position: center结合使用，用于缩放背景图像。对于全宽/适合屏幕的背景图像，可以使用background-size: 100% 100%或background-size: 100vw 100vh。看看这篇文章，了解cover和100%之间的区别？

.main-content {
background: url("//via.placeholder.com/1000/4B89DA/4B89DA") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
overflow: hidden;
width: 100vw;
min-height: 100vh;
}

<div class="main-content"></div>