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

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 的左上角，无论 window.

的分辨率如何

基本上，无论使用什么设备，我都试图让背景图像居中 (landscape/portrait)。

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>

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

Centering Background Image Horizontally for Responsive Layout

css

jquery

background-image