Преобразование прямоугольного изображения в квадрат с 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. Соотношения сторон в адаптивном веб-дизайне — Руководство по поддержанию пропорций изображений в адаптивном веб-дизайне.