Выравнивание изображения в контейнере при помощи CSS

Опубликовано автором

Красивый и аккуратный дизайн сайта зачастую требует специально подготовленного контента, к примеру фотографий с заданным соотношением сторон.

Но не всегда есть возможность подготовить фотографии должным образом. Рассмотрим несколько способов вписать и выровнять картинку в заданной область при помощи CSS.

Напишем HTML:

<div class="image">
  <img src="https://rufri.ru/wp-content/uploads/2022/01/mera.jpg">
</div>

Пропишем стили для контейнера:

.image {
  width: 200px; 
  height: 200px; 
  border: 5px solid #515151; 
  margin: 1em 2em; 
  float: left; 
}

1 cпособ: 100% width/height

height: 100%

Первый способ заключается в использовании значения 100% для одного из параметров тега img – ширины или высоты. При этом второй параметр должен быть установлен в auto для сохранения пропорций изображения. Картинка растянется до размера контейнера по одному из измерений, а второе значение будет рассчитано автоматически. В результате по краям картинки могут образоваться поля, но она поместится в отведённой области целиком, без обрезки.

.image {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; 
} 
.image img {
  height: 100%;
  width: auto;
}
widtht: 100%
.image {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image img {
  min-height: 100%;
  min-width: 100%;
  flex-shrink: 0; 
}

Так как при ширине 100% от ширины контейнера изображение вылезает за пределы этого контейнера по высоте, для обрезки лишнего используется свойство overflow со значением hidden. При этом, если мы хотим, чтобы в видимую область попала центральная часть изображения, его надо выровнять по центру контейнера. Проще всего это сделать задав контейнеру display: flex, и далее позиционировать изображение по вертикали и горизонтали с помощью свойств justify-content и align-items.

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

Чтобы избавиться от полей можно заменить свойства width и height на min-width и min-height (при этом ширина и высота по умолчанию примут значения auto). Тогда вне зависимости от ориентации изображения, оно заполнит область целиком.

Важно: если вы используете выравнивание с помощью flex, добавьте flex-shrink: 0, чтобы запретить автоматическое масштабирование изображения.

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

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

Подобным образом можно вырезать только часть изображения, увеличивая или уменьшая масштаб изображения и контролируя смещение с помощью свойства margin.

.image { 
  overflow: hidden; 
} 
.image img { 
  margin: -50% 0 0 -80%;
  width: 200%; 
  height: auto; 
}

2 cпособ : background-image

Другой способ вставки изображений – установка их в качестве фонового изображения блока. Этот способ попал сюда за то, что у фонового изображения есть свойство background-size с двумя полезными значениями: contain и cover. Первое умещает изображение целиком с сохранением пропорций (и образованием полей), второе растягивает изображение таким образом, чтобы полей не осталось, также с сохранением пропорций и при необходимости обрезая лишнее.

.image { 
  background-image: url(/background.png); 
  background-repeat: no-repeat; 
  background-position: 50% 50%; 
  background-size: cover; 
}
contain
cover

3 cпособ: object-fit

.image img {
  object-fit: cover;
  object-position: 50% 50%;
  width: 100%;
  height: 100%; 
}

Этот способ похож на предыдущий, только не нужно делать изображение фоном. Свойство object-fit применяется к самому изображению и имеет значения contain и cover, работающие аналогично таким же значениям свойства background-size. При этом width и height нужно установить в 100%.

Свойство object-position используется в сочетании с object-fit и задаёт положение содержимого замещаемого элемента внутри контейнера относительно координатных осей X и Y. Значение по умолчанию 50% 50%. Свойство анимируется. Не наследуется.

примеры

источник

Смотрите по теме:
Как сделать обтекание картинки текстом в нижнем правом углу
Просмотры: 2 021