2016-11-25 2 views
2

У меня есть DIV с фоновым изображением в нем. На компьютере это выглядит красиво, но он приближается, когда я иду на мобильный телефон?Фоновое изображение div увеличивает масштаб на мобильном

Вот мои HTML и CSS кода:

.vh { 
 
    width: 100vw; 
 
    height: 100vh; 
 
    position: absolute; 
 
    background: url("http://autohof.coersonline.nl/wp-content/uploads/2016/09/Headerplaat-4.jpg") no-repeat center center fixed; 
 
    -webkit-background-size: cover; 
 
     -moz-background-size: cover; 
 
     -o-background-size: cover; 
 
     background-size: cover; 
 
}
<div class="vh"> 
 
</div>

Спасибо за ваше время!

+0

Try 'фон-размер: 100%' –

+0

@PrasathV, когда я сделать изображение на дисплее не суммируется и не на мобильном телефоне. –

+0

вы установили метатег ''? –

ответ

0

Проблема, с которой вы столкнулись, - это ошибка в iOS Safari с единицами просмотра. Старайтесь не использовать их или использовать this plugin, чтобы исправить это.

0

Фон будет реагировать на высоту, используя следующий CSS.

background-image: url('YOUR_IMAGE'); 
background-repeat: no-repeat; 
background-size: contain; 
background-position: center; 

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.vh { 
 
    height: 100%; 
 
    width: 100%; 
 
    background: url("http://autohof.coersonline.nl/wp-content/uploads/2016/09/Headerplaat-4.jpg"); 
 
    background-repeat: no-repeat; 
 
    background-size: contain; 
 
    background-position: center; 
 
    -webkit-background-size: cover; 
 
    -moz-background-size: cover; 
 
    -o-background-size: cover; 
 
    background-size: cover; 
 
}
<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="width=device-width"> 
 
</head> 
 

 
<body> 
 
    <div class="vh"> 
 
    </div> 
 
</body> 
 

 
</html>

Смежные вопросы