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

Пройдите тест, узнайте какой профессии подходите и получите бесплатную карьерную консультацию
В конце подарим скидку до 55% на обучение
Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

CSS
Скопировать код
.ratio-box {
  aspect-ratio: 16 / 9;
}

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

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

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

Пройдите тест и узнайте подходит ли вам сфера IT
Пройти тест

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

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

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

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

CSS
Скопировать код
.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 (высота видимой области) позволяют элементам масштабироваться в зависимости от размера видимой области, что делает дизайн более гибким:

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

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

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

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

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

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

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

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

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

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

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

CSS
Скопировать код
.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.
Свежие материалы