Держите баннер отзывчивым в любое время по мере увеличения окон браузера - PullRequest
Новая
       6

Держите баннер отзывчивым в любое время по мере увеличения окон браузера

0 голосов
/ 15 января 2019

Я пытаюсь сделать так, чтобы мой баннер плавно расширялся при увеличении размера окна моего браузера вправо.

В какой-то момент я вижу черную щель.

Это черное пятно показывают на Note 8 и Pixel XL.

enter image description here

Это CSS, который я получил на странице сейчас 

.respheader{
    background-image: url({{asset('uploads/client/'.$data->Header->site_banner) }});
    background-size:cover;
}


@media only screen and  (min-width: 1024px) {

    .respheader{
        background-image: url({{asset('uploads/client/'.$data->Header->site_banner) }});
        background-size:cover;
    }

}

Вы можете увидеть больше CSS здесь

http://dips.awsri.com/

Проблема есть прямо сейчас.

Как можно пойти дальше и отладить это?

1 Ответ

0 голосов
/ 15 января 2019

Я бы изменил background-size: содержать на background-size: cover в ваших медиазапросах.

За https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

background-size содержит : Масштабирует изображение как можно больше, не обрезая и не растягивая его.

фоновая обложка : Масштабирует изображение как можно больше, не растягивая его. Если пропорции изображения отличаются от элемента, оно обрезается по вертикали или по горизонтали, чтобы не осталось пустого места.

...