水平居中背景图像以实现响应式布局

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%。我似乎无法让它发挥作用。我试过变换，margin-left:-50% 和 background-position: center;无济于事。

例如：http://cbotriage.bid/boards/appeal.php?item_id=569578

编辑：我正在尝试将背景图像向左移动，以便背景图像的中心位于容器 div“bg_before”的中心，即 100% 的宽度和 100% 的高度。目前，无论窗口的分辨率如何，背景图像都位于“bg_before”div的左上角。

基本上，无论设备（横向/纵向）如何，我都试图使背景图像居中。

Answer 1

你好，查尔斯，请使用这个 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>