Фоновое изображение мобильного сайта не изменяется - PullRequest
Новая
       24

Фоновое изображение мобильного сайта не изменяется

0 голосов
/ 02 сентября 2018

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

Они обрезают половину изображения, но заполняют экран в портретной ориентации. Тем не менее, они хорошо смотрятся в альбомной ориентации. 

body {
          width: 100%;
          height: 100%;
          background: url("HOME.png");
          background-position: center center;
          background-repeat: no-repeat;
          position: fixed;
          background-size: cover;
    }

и 

body {
    background: url("HOME.png") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100vh;
    overflow: hidden;
}

это показывает полное изображение, но оставляет половину экрана пустым и взрывается в ландшафте 

body{
    background: url("HOME.png") no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        height: 100vw;   
        overflow: hidden;
}

Изображение 1920x1080. Я также изменил размер изображения до 321x174 с точно такими же результатами. Это проблема размера изображения? Есть ли способ заставить изображение отображаться на экране без пробелов и без его обрезки? Помогите, пожалуйста, с этим разбить мне мозги.

Ответы [ 2 ]

0 голосов
/ 02 сентября 2018

Попробуйте использовать

background-size: 100% в вашем CSS, т.е. 

body {
          width: 100%;
          height: 100%;
          background: url("HOME.png");
          background-position: center center;
          background-repeat: no-repeat;
          position: fixed;
          background-size: 100%;
    }

background-size: 100% относится как к высоте, так и к ширине.

Дополнительная информация если вы хотите изменить любой из них, вы можете попробовать background-size: 100% 50%;

вы можете прочитать об этом здесь https://www.w3schools.com/cssref/css3_pr_background-size.asp

0 голосов
/ 02 сентября 2018

Используйте код как показано ниже:

См. Скрипку 

body {
width: 100vw;
    height: 100vh;
    background: url(https://material.angular.io/assets/img/examples/shiba1.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    }
...