Создаем респонсивный div с сохранением пропорций в CSS

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

Для сохранения пропорций блока воспользуйтесь свойством CSS aspect-ratio. Например, установка соотношения сторон 16:9 выглядит следующим образом:

.ratio-box {
  aspect-ratio: 16 / 9;
}

Произведите применение этого класса к вашему элементу:

<div class="ratio-box">
  <!-- Здесь будет ваш контент -->
</div>

Для изменения пропорций измените значения в aspect-ratio, например, на 4 / 3, если вам требуется соотношение сторон 4:3. Этот подход гораздо удобнее и понятнее, чем манипуляции с псевдоэлементами.

Объяснение пропорций

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

Способ 1: Использование padding-bottom

Время проверило этот метод, основанный на использовании padding-bottom:

.ratio-container {
  width: 100%; /* Адаптация к ширине родительского элемента */
  max-width: 100%; /* Ограничиваем максимальную ширину, чтобы элемент не выходил за границы */
  position: relative; /* Задаем относительное позиционирование для позиционирования элементов на потомках */
  padding-bottom: 56.25%; /* Соответствует пропорции 16:9 */
  box-sizing: border-box; /* Мы включаем внутри рамки padding и border */
}
.ratio-content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto; /* Добавим прокрутку, если контент не влез */
}

Произвольно указав процентное значение padding-bottom, вы можете рассчитать соотношение ширины и высоты.

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

Способ 2: Использование единиц VW и VH для гибкого дизайна

Единицы vw (ширина видимой области) и vh (высота видимой области) позволяют элементам масштабироваться в зависимости от размера видимой области, что делает дизайн более гибким:

.flexible-box {
  width: 50vw; /* Используем половину ширины видимой области */
  height: 28.125vw; /* Соответствует пропорции 16:9, привязанной к ширине */
  min-width: 320px; /* Не позволяем элементу сжиматься слишком сильно на маленьких экранах */
}

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

Представьте рассматриваемые блоки как 🖼️ рамки с картинами, это поможет вам проникнуться логикой их пропорций:

Рамка с картиной 🖼️ имеет определенное соотношение сторон, например, 16:9:
 ________
|        |
|        |  Если ширина равна 16 частям, то высота всегда будет равна 9 частями.
|________|

А теперь, применим немного CSS-волшебства для поддержания этих пропорций:

.picture-frame {
  width: 100%;        /* Используем всю доступную ширину */
  padding-top: 56.25%; /* Это устанавливает пропорции 16:9 */
  background: url('picture.jpg'); /* Здесь будет ваша картинка */
  background-size: cover; /* Без отступов, картинка полностью заполняет блок */
}

Свойство padding-top в CSS определяет высоту элемента относительно его ширины и обеспечивает сохранение пропорций 16:9 на любом устройстве. 🖥️ ↔️ 📱

Сеточные макеты и пропорции

Хотите создать сетку и поддерживать квадратные пропорции блоков? Используйте одинаковые единицы измерения для ширины и высоты:

.grid-item {
  width: 33vw; /* Используем треть ширины видимой области */
  height: 33vw; /* Сохраняем квадратные пропорции */
}

Как контролировать переполнение контента?

Чтобы справиться с переполнением при использовании элемента с фиксированными пропорциями, используйте свойство overflow:

.overflow-content {
  overflow-y: auto; /* Включаем вертикальный скроллинг */
  overflow-x: hidden; /* Горизонтального скроллинга не будет */
}

Временное использование заменителей изображений

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

Поддержка устаревших браузеров

Не забываем, что метод использования padding-bottom до сих пор является надежным и работает даже в таких старых браузерах, как IE9+.

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

1. Aspect Ratio Boxes | CSS-Tricks – CSS-Tricks — подробное описание пропорций в CSS.
2. Aspect-Ratio – CSS: Cascading Style Sheets | MDN — Исчерпывающее руководство по свойству aspect-ratio от MDN.
3. Creating Intrinsic Ratios for Video – A List Apart — Глубокое погружение в поддержание пропорций видео в адаптивном веб-дизайне.
4. New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly | Articles | web.dev — Свежие новости о поддержке свойства aspect-ratio в различных браузерах.
5. Aspect-Ratio | CSS-Tricks – CSS-Tricks — Подробный справочник по aspect-ratio от CSS-Tricks.
6. Newest 'aspect-ratio' Questions – Stack Overflow — Обсуждение и вопросы о поддержании пропорций на Stack Overflow.