Масштабирование высоты div в CSS пропорционально ширине

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

Для создания отзывчивого квадратного div, вы можете расчитать соотношение сторон в CSS используя свойство padding-top. Интересной особенностью этого метода является то, что внешние отступы исчисляются на основе ширины элемента, даже если они вертикальны.

.square {
  width: 50%; /* Устанавливаем ширину в половину родительского элемента */
  height: 0;
  padding-top: 50%; /* Как будто вы смотрите на квадрат в Instagram */
  background: #f00; /* Живой фон, который вряд ли оставит вас равнодушным */
}

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

Этот код возвращает идеальный квадрат, масштабируемый вместе с шириной контейнера. Изменяя padding-top, можно получить другие пропорции. В качестве примера можно назвать соотношение 16:9, характерное для широкоформатных дисплеев, для этого устанавливают 56.25%.

Сочетание с родителем: решение для сохранения соотношения сторон

Для сохранения пропорции div, исходя из его ширины, используйте свойство padding-bottom для родительского элемента. Этот метод известен как трюк с использованием padding-bottom или padding-top.

.parent {
  position: relative;
  width: 25%; /* Процент может быть любым */
  padding-bottom: 25%; /* В идеальном случае, равно ширине */
}

.child {
  position: absolute;
  width: 100%; /* Заполняем весь родительский элемент */
  height: 100%; /* Элемент полностью адаптируется под размер родительского элемента */
}

Все о свойстве aspect-ratio

С новым свойством aspect-ratio необходимость контролировать соотношение сторон становится менее актуальной. Это свойство позволяет автоматически подстраивать высоту под заданную ширину.

.aspect-ratio-box {
  width: 30%; /* Управляем шириной элемента */
  aspect-ratio: 1 / 2; /* CSS автоматически расчитает высоту */
}

Путь через ViewPort

Используя единицы ширины ViewPort (vw), можно выстроить так, чтобы div сохранял заданное соотношение сторон при изменении размеров окна просмотра. Этот метод подойдет для создания дизайна, который будет выглядеть привлекательно на любых устройствах.

.viewport-box {
  width: 30vw; /* Обозначает 30% от ширины окна просмотра */
  height: 15vw; /* И не больше 15% от ширины окна просмотра */
}

Синхронизация пропорций: наложение контента и сохранение соотношения сторон

Когда требуется наложить сложный контент на масштабируемый div, примените абсолютное позиционирование внутри относительно позиционированного контейнера для сохранения пропорций.

.container {
  position: relative;
  width: 50%; /* Задаем ширину в половину родительского элемента */
  height: 0;
  padding-top: 56.25%; /* Сохраняем широкоформатные пропорции */
}

.inner-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* наполняем контейнер */
  height: 100%; /* а также по высоте */
}

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

Представьте, что масштабирование div подобно тому, как вы растягиваете резинку, чтобы достичь размеров кредитной карты:

Совет: Обратите внимание на использование width: 100%; и padding-top: проценты%;

.myDiv {
  width: 100%;       /* Растягиваем на всю ширину доступного пространства */
  padding-top: 56.25%; /* Создаем высоту, пропорциональную ширине */
}

Подводные камни пропорционального масштабирования

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

Живые примеры масштабирования

Посмотрите эти техники пропорционального масштабирования в действии на демонстрациях на JSFiddle.

Плавающая типографика

Сочетайте плавающую типографику с вашим div, используя функцию calc() и единицы viewport, что обеспечит гармоничное масштабирование текста.

.fluid-text {
  font-size: calc(1vw + 1vh + 0.5vmin); /* Размер шрифта будет адаптироваться к размерам окна */
}

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

1. Aspect Ratio Boxes | CSS-Tricks — подробное руководство по созданию блоков с фиксированным соотношением сторон в CSS.
2. aspect-ratio – MDN Web Docs — официальная документация MDN по свойству aspect-ratio в CSS.
3. How To – Aspect Ratio / Height Equal to Width — учебное пособие по поддержанию соотношения сторон элементов.
4. Creating Intrinsic Ratios for Video – A List Apart — статья о создании внутренних пропорций для видео и других медиаобъектов.
5. Responsive Web Design: What It Is And How To Use It — Smashing Magazine — статья о принципах адаптивного веб-дизайна, включая поддержание пропорций.
6. Maintain the aspect ratio of a div with CSS – Stack Overflow — обсуждение сообщества разработчиков с множеством подходов для сохранения пропорций в CSS.