Самый простой способ кропнуть изображение на CSS

Как только не извращались верстальщики, чтобы кропнуть изображение средствами CSS. С появлением свойств object-fit и object-position, задача сильно упростилась.

Во-первых, что такое кроп и для чего он нужен?

Кроп (crop) в переводе с английского значит «обрезать». В этом и есть основная задача кропа — вписывать без искажений изображения в блоки с иными размерами и пропорциями. Чаще всего используется в галереях, плитке, списках и т.п.

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

Чтобы вырезать середину изображения и задать ему размеры 100×100 воспользуемся CSS-свойством object-fit и object-position

.crop {
  width: 100px;
  height: 100px;
  object-fit: cover;
  object-position: center;
}

Получится примерно так:

Остановимся подробнее на свойствах.

Object-Fit

Свойство Object-Fit определяет, как содержимое элемента должно заполнять контейнер относительно его высоты и ширины.

Object-Fit может принимать следующие значения:

Fill — дефолтное значение, изображение заполняет полностью контейнер по всей высоте и ширине.
Contain — изображение масштабируется, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью поместиться внутри контейнера.
Cover — изображение обрезается, выравниваясь по центру с сохранением пропорций таким образом, чтобы полностью заполнить область контейнера.
None — изображение не изменяет свои размеры, чтобы поместиться и заполнить область контейнера.
Scale-Down — изображение выбирает из двух значений none и contain то значение, которое даёт меньшие размеры.

Object-Position

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

Значение по умолчанию 50% 50%.

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

В заключение

Напомню, в Вордпресс для кропа существует прекрасная функция add_image_size(), которая регистрирует новый размер изображений для последующего использования в интерфейсе. Если на сайте повсеместно используется какой-то конкретный размер изображений, целесообразнее его зарегистрировать (или скорректировать имеющийся) и использовать на уровне бэкенда.