Фоновое изображение «крышка» и «центр» не работает на Android - PullRequest
Новая
       6

Фоновое изображение «крышка» и «центр» не работает на Android

0 голосов
/ 31 декабря 2018

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

Вот код: 

<div class="main-content" style="background-image: url(<?php echo get_field('imagen_portada')?>)">

И CSS: 

.main-content {
   width: 100%;
   background-size: cover;
   background-position: center;
   min-height: 100vh;
}

Для меня не имеет никакого смысла, что это не работает.

РЕДАКТИРОВАТЬ: Кстати, если я использую "background-position: left" изображениесжимаются, и если я правильно использую изображение, оно вообще не отображается, все это в Chrome для Android, в настольном браузере все работает так, как должно.

1 Ответ

0 голосов
/ 31 декабря 2018

background-size: cover используется в сочетании с background-position: center для масштабирования / масштабирования фоновых изображений.Для полноэкранного фонового изображения можно использовать background-size: 100% 100% или background-size: 100vw 100vh.Посмотрите на этот пост , чтобы понять разницу между cover и 100%? 

.main-content {
  background: url("//via.placeholder.com/1000/4B89DA/4B89DA") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: hidden;
  width: 100vw;
  min-height: 100vh;
}
<div class="main-content"></div>
...