Проблема CSS с отзывчивым фоновым изображением div - PullRequest
Новая
       71

Проблема CSS с отзывчивым фоновым изображением div

0 голосов
/ 06 июля 2019

Я пытаюсь сделать фоновое изображение div на экране как на рабочем столе, так и на мобильных устройствах. Он отлично работает на рабочем столе, но, что бы я ни пытался, изображение на мобильном телефоне выглядит увеличенным.

Это страница: https://www.smithbars.com/tappd/

Это CSS для 

/*desktop*/
@media only screen and (min-width: 800px) {
.section1 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background-image: url(TAPPD1_.jpg);
    background-attachment: fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-color: #000;
    padding-bottom: 2em;
}
}

/*mobile*/
@media only screen and (max-width: 800px) {
.section1 {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    background: url(TAPPD1_.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
       -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding-bottom: 2em;
}
}

Большое спасибо за любую помощь!

1 Ответ

0 голосов
/ 06 июля 2019

Это происходит потому, что вы пытаетесь использовать background-size: cover, который поддерживает соотношение сторон изображения.

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

Изменение: 

background-size: cover;

до: 

background-size:100% 100%;

Изображение теряет соотношение сторон, но вы получаете ваше желание.

...