Как сделать фоновое изображение, чтобы соответствовать размеру видимой области на мобильном устройстве? - PullRequest
Новая
       12

Как сделать фоновое изображение, чтобы соответствовать размеру видимой области на мобильном устройстве?

2 голосов
/ 30 апреля 2020

Когда вы открываете сайт на мобильном устройстве, вы можете видеть, что фоновое изображение зависит от объема контента на странице, где больше - фоновое изображение увеличивается, а меньше - уменьшается. Так, например, когда вы открываете панель навигации на мобильном устройстве, вы можете видеть, что фон резко увеличивается, так как панель раздвигается и становится больше контента. Как сделать фон независимым от количества контента, зависит только от области просмотра.

Что на данный момент в css и html

<body class="bg-image1">
body {  
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;
    padding: 0;

    height: 100%;
    min-height: 100%;
}
.bg-image1 {  
        background-image: url(path); 
}

1 Ответ

0 голосов
/ 30 апреля 2020 
.bg-image1 {  
    background-image: url(путь); 
    height: 100vh; /* may need !important*/
    width: 100vw; /* may need !important*/
}

vw и vh означают ширину области просмотра и высоту области просмотра соответственно. Таким образом, размер изображения будет соответствовать размерам окна браузера. Если клавиатура всплывает в любой точке взаимодействия во время отображения изображения на мобильном устройстве, высота окна просмотра изменится, равно как и высота вашего изображения. Просто кое-что помнить.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...