将背景图像水平居中以进行响应式布局

Question

我有两个背景图像堆叠在一起。根据ajax调用的结果，将顶部图像向上滑动以显示其后面的图像。我有以下布局：

<div id="bg_before"><img class="bg_image"></div>
<div id="bg_after"><img class="bg_image"></div>

上传的图像将根据用户的选择而有所不同。CSS如下：

#bg_before, #bg_after {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -10;
    width: 100%;
    height: 100%;
}

.bg_image {
    background-size: cover;
    overflow: hidden;
}

图像在显示器上正确居中(我们建议上传图像1920x1080)。然而，在平板电脑或手机上，我希望1920x1080的图像适合居中，裁剪图像的左右，并将高度保持在100%。我似乎不能让它工作。我已经尝试了变换，左边缘：-50%，背景位置:居中；但都没有用。

示例位于：http://cbotriage.bid/boards/appeal.php?item_id=569578

编辑:我正在尝试将背景图像向左移动，这样背景图像的中心就会落在容器div "bg_before“的中心，它是显示器的100%宽和100%高。目前，无论窗口的分辨率如何，背景图像都位于"bg_before“目录的左上角。

从本质上讲，我试图让背景图像居中，而不管设备是什么(风景/肖像)。

Answer 1

你好，M查尔斯，请使用此css...就像我做的那样

​

#bg_before, #bg_after {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    z-index: -10;
    width: 100%;
    height: 100%;
}
.bg_image {
    background-size: cover;
    overflow: hidden;
 }
#bg_before .bg_image {
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;
}

<div id="bg_before"><img class="bg_image"></div>
<div id="bg_after"><img class="bg_image"></div>

​