Адаптивное изображение: держите его высоту, держите его по центру - PullRequest
Новая
       26

Адаптивное изображение: держите его высоту, держите его по центру

0 голосов
/ 13 июня 2018

У меня полноразмерное изображение, которое слишком мало по размеру для мобильного телефона.Я попытался добавить height:250px; width:auto (в медиа-запрос), который дает большой размер, но изображение не по центру.Как мне отцентрировать его?

Изображение слишком маленькое:

Image is too small

Изображение не отцентрировано:

Image isn't centered

1 Ответ

0 голосов
/ 13 июня 2018

Попробуйте background-image с background-position: center center;

.image {
  border: 1px solid lightblue;
  height: 250px;
  background-image: url('http://via.placeholder.com/1600x500');
  background-size: cover;
  background-position: center center;
}
<div class="image"></div>
<h1>Header</h1>
<p>Lorem ipsum</p>
...