Преобразование прямоугольного изображения в квадрат с CSS

Быстрый ответ

Для превращения прямоугольного изображения в форму идеального квадрата, задайте равные значения высоты и ширины для элемента img и примените свойство object-fit: cover. Такой метод позволяет изображению занимать всё пространство заданного квадрата, всё лишнее будет обрезано без нарушения пропорций.

.square-crop {
  width: 100px; /* Обеспечиваем формирование квадрата, устанавливая равные размеры */
  height: 100px;
  object-fit: cover; /* Команда обрезки с сохранением пропорций */
}

<img src="image.jpg" class="square-crop" alt="Идеальный квадрат">

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

Продвинутые приёмы и ключевые сценарии

Квадрат с фоновым изображением

Вы можете создать квадрат с помощью div и задать ему фоновое изображение, что предоставит больше возможностей для манипуляций:

.square-background {
  width: 100px;
  height: 100px;
  background-image: url('image.jpg');
  background-size: cover; /* Обрезка фонового изображения */
  background-position: center; /* Центрирование изображения */
  background-repeat: no-repeat; /* Повторение изображения не допускается */
}

<div class="square-background"></div>

Этот подход предоставляет широкие возможности для работы с фоном, позволяя размещать контент поверх него, не затрагивая изображение.

Подробнее об этом расскажет наш спикер на видео

Адаптивный квадрат для адаптивного дизайна

Сделайте ваши квадраты адаптивными, чтобы они корректно отображались на различных экранах:

.responsive-square {
  width: 50vw; /* Задаём процент от ширины экрана */
  height: 0;
  padding-bottom: 50vw; /* Подгоняем высоту под ширину */
  position: relative;
}

.responsive-square img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Сохраняем видимость и пропорциональность содержимого */
}

<div class="responsive-square">
  <img src="image.jpg" alt="Адаптивный квадрат">
</div>

При использовании этого метода, контейнер будет сохранять квадратную форму на любых экранах.

Инклюзивный дизайн и доступность

Нельзя забывать о важности атрибута alt, который предоставляет описание изображения:

<img src="image.jpg" class="square-crop" alt="Дескриптивный текст доступного изображения">

Атрибут alt, заполненный правильно, помогает сделать изображение понятным при использовании скринридеров.

Визуализация

Жизненный пример поможет вам понять сложные идеи. Допустим, мы имеем дело с прямоугольным изображением, представляющим поднос с едой 🍽️🥗🍔🍟:

Прямоугольный поднос с различными блюдами (🍽️🥗🍔🍟): закуска, бургер, фри

Но нас интересует только главное блюдо — бургер 🍔:

.burger {
    width: 100%;    /* Ширина подноса 🍽️ */
    height: auto;   /* Автоматическое сохранение пропорций */
    object-fit: cover; /* Оставляем только бургер 🍔, обрезка всего остального */
    object-position: center; /* Центрируем бургер */
}

В результате мы получим:

До: Прямоугольный поднос с различными блюдами 🍽️🥗🍔🍟
После: Квадратный бургер 🍔

Отладка и дальнейшие улучшения

Искусное центрирование с помощью flexbox

Flexbox идеально подходит для совершенного центрирования и равномерного распределения:

.square-flexbox {
  display: flex;
  justify-content: center; /* Центрируем содержимое */
  align-items: center;
  width: 100px;
  height: 100px;
  overflow: hidden; /* Сокрытие лишнего за пределами контейнера */
}

.square-flexbox img {
  flex-shrink: 0;
  min-width: 100%;
  min-height: 100%;
  object-fit: cover; /* Поддерживаем пропорциональность */
}

Медиазапросы для адаптивного дизайна

Медиазапросы придут на помощь для адаптации ваших квадратов к различного разрешения экранов:

@media (max-width: 768px) {
  .responsive-square {
    width: 90vw;
    padding-bottom: 90vw;
  }
}

Регулировка ширины и padding-bottom предоставляет возможность контролировать отображение на устройствах разного размера.

Поддержание формы квадрата с помощью псевдоэлементов

Можем попробовать использовать псевдоэлемент ::after:

.aspect-ratio-box::after {
  content: '';
  display: block;
  padding-top: 100%; /* Обеспечиваем равенство высоты ширине родительского элемента */
}

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

Полезные материалы

1. object-fit – CSS: Каскадные таблицы стилей | MDN — Детальное описание свойства object-fit для масштабирования и обрезки изображений.
2. Коробки с аспектным соотношением | CSS-Tricks — Создание элементов с сохранением аспектного соотношения.
3. CSS Множественные фоны — Управление фонами при помощи CSS.
4. Отзывчивые изображения – Изучение веб-разработки | MDN — Информация о том, как создавать адаптивные изображения.
5. Полное руководство по Flexbox | CSS-Tricks — Всё о Flexbox для позиционирования элементов.
6. Полное руководство по CSS Grid | CSS-Tricks — Обязательно к прочтению, если вы работаете с CSS Grid для структурирования макетов.
7. Соотношения сторон в адаптивном веб-дизайне — Руководство по поддержанию пропорций изображений в адаптивном веб-дизайне.