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

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

24 сентября 2018

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

Всё в одном: Вордпресс бандл для стартапов с фантастической скидкой 96%

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

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

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

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

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

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

Вырезать из фотографии квадрат на CSS

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

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(), которая регистрирует новый размер изображений для последующего использования в интерфейсе. Если на сайте повсеместно используется какой-то конкретный размер изображений, целесообразнее его зарегистрировать (или скорректировать имеющийся) и использовать на уровне бэкенда.

Всё самое новое и интересное из мира Вордпресс в моём Телеграм-канале. Подписываемся!

Популярное в этом месяце

Подпишитесь на рассылку и получайте новые материалы на электронную почту

Иван Данилин
Автор: Иван Данилин

Практикующий веб-разработчик, специализируюсь на платформе Вордпресс.

Добавить комментарий
CSS

Лучшие премиум-темы для Вордпресс
Подробнее