Центрирование фонового изображения по горизонтали для адаптивного макета - PullRequest
Новая
       6

Центрирование фонового изображения по горизонтали для адаптивного макета

0 голосов
/ 18 марта 2020

У меня есть два фоновых изображения, сложенных друг на друга. Основываясь на результатах вызова 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% и background-position: center; безрезультатно.

Пример по адресу: http://cbotriage.bid/boards/appeal.php?item_id=569578

РЕДАКТИРОВАТЬ: я пытаюсь сместить фоновое изображение влево, чтобы центр фонового изображения приземляется в центре контейнера div "bg_before", который имеет ширину 100% и высоту дисплея 100%. В настоящее время фоновое изображение находится в верхнем левом углу элемента "bg_before" независимо от разрешения окна.

По сути, я пытаюсь сделать фоновое изображение центром независимо от устройства (ландшафт / портрет).

1 Ответ

1 голос
/ 19 марта 2020

Привет, М. Чарльз, пожалуйста, используйте это 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>
...