Я хочу удалить пустое пространство, которое появляется в моем адаптивном изображении баннера

Question

У меня есть баннер, который содержит фоновое изображение, которое я хочу, чтобы оно было отзывчивым и отображалось одинаково на любом устройстве, поэтому я сделал background-size = 100%, но проблема в том, что пустое пространство вверху и внизу фонового изображения появляется то, что я хочу удалить, но безуспешно. Я перепробовал много предложений в некоторых других вопросах, связанных с этим, но это не работает. Я новичок в CSS, может кто-нибудь помочь мне найти идеальное решение для такой проблемы?

Ниже, вы найдете код моего баннера и 2 картинки, объясняющие, что у меня есть.

Это HTML-код баннера:

<div class="bannercontainer">
    <div class="banner" data-fullscreen="on" data-auto="true" data-hidetimerbar="off" data-fullscreenoffsetcontainer=".header">
        <ul>
            <li data-transition="fade" data-slotamount="7" data-saveperformance="on" class="background" style="background-image: url(images/slider/test.png); background-size: 100%">
                <div class="tp-caption sft large_bold_white"  data-x="left" data-y="center" data-hoffset="500" data-voffset="-85" data-speed="700" data-start="700" data-easing="easeOutBack">Welcome</div>
                <p class="tp-caption fade" data-x="left" data-y="center" data-hoffset="500" data-speed="500" data-start="900" data-easing="easeOutBack"></p>
                <a href="#slide-under" class="tp-caption sfb btn btn-primary btn-lg btn-wide slider-scroll" data-x="left" data-y="center" data-voffset="80"  data-hoffset="500" data-speed="300" data-start="1000">Read More</a>
            </li>
        </ul>
    </div>
</div>

На первом рисунке показано фоновое изображение, которое идеально подходит https://imgur.com/a/Koqvh0t

Но в мобильном устройстве я хочу только удалить пустое пространство https://imgur.com/a/THMHj0P и сохраняйте фоновое изображение таким образом.

Большое спасибо за вашу помощь.

Answer 1

Попробуйте следующий CSS:

.bannercontainer .background{
    background-size: cover;
}

Это заставляет изображение заполнять любые пустые места и обрезать изображение при необходимости.

Редактировать: На самом деле похоже, что вы уже используете его. По изображениям это выглядит как размер дочерних элементов, например .banner, <ul> или <li> - это не 100% высоты. Используйте F12 для проверки элементов. Наведите указатель мыши на элементы, чтобы увидеть их размеры на странице. Тот, который оборачивается только вокруг изображения, вероятно должен быть установлен в position: absolute; height: 100%; width: 100%; margin:0; padding: 0;

Answer 2

что если вы просто установите высоту 100% вместо всего изображения:

height: 100%;

или вы можете просто установить красный фон, чтобы он не выглядел как пустое пространство:

background-color: red;