как центрировать изображение с помощью css на мобильном?

Question

как центрировать изображение с помощью css на мобильном?

Я использую фон imgв htmlтеге, а imgне в центре. Я использую, background size: cover;и он не работает, как бы я хотел, чтобы он работал

<section class="section-a">
  <h1 class="main-header-sec-a">Bienvendio a Vida Excotica</h1>
</section>

.section-a{
  background-image: url('/img/waffles.jpeg');
  min-height: 100%;
  height: 700px;
  background-size: cover;
}

Это результат

введите описание изображения здесь

Это то, что у меня есть

введите описание изображения здесь

html,css,responsive,

0

Ответов: 4

HTML, CSS, отзывчивый,

Похожие вопросы

score 1 · Accepted Answer

1

Вы также можете масштабировать изображение следующим образом:

background-size: 100% auto;

JSFiddle: http://jsfiddle.net/6h4up90v/6/

score 1 · Accepted Answer

1

background-repeat: no-repeat;
background-position: center center;

Это должно сделать работу.

Я также рекомендую вам прочитать следующую информацию:

background : url ( images / image . jpg ) no - повторить 50 % 50 %; "rel =" nofollow noreferrer "> background-position, MDN
фоновая позиция, W3Schools

score 0 · Accepted Answer

0

попробуйте добавить:

background-size: cover;

score 0 · Accepted Answer

0

Фактически вы можете использовать background-position, но поскольку это обычно заканчивается разрезанием изображения, вы должны также указать background-positionсвойство. поэтому ваш код будет выглядеть следующим образом:

#myDivID {
  background: url(myImageUrl); 
  background-size: cover;
  background-position: center;
}

Кроме того, если вы хотите повысить совместимость со старыми версиями браузеров, вы можете использовать префикс размера фона, добавив следующий код:

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

см. полный код, работающий здесь: https://jsfiddle.net/awrstbn9/9/ Конечно, есть и другие способы достижения этого, но (на мой взгляд) это рекомендуемый.