CSS: Как создать div с динамической высотой, равной ширине?

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

Хотите, чтобы высота элемента автоматически подстраивалась под его переменную ширину? Решение простое: используйте свойство padding-top со значением заданным в процентах. Таким образом, высота элемента станет зависеть от его ширины:

.square {
  width: 50%; /* Параметр настроим для конкретных нужд */
  height: 0;
  padding-top: 50%; /* Получаем превосходные квадратные пропорции */
}

Примените эти стили в HTML следующим образом:

<div class="square">
  <!-- Содержимое автоматически подстраивается под ширину, вуаля! -->
</div>

Таким образом, элемент .square сохранит квадратные пропорции при любом значении ширины, строго соответствуя соотношению сторон 1:1.

Установка динамического размера с применением псевдоэлементов

Псевдоэлементы ::before или ::after обеспечивают сохранение пропорций блока, даже если содержимое внутри его меняется:

.container-relative {
  width: 100%; /* Зависимость от размеров родительского элемента */
  display: inline-block;
  position: relative;
}

.container-relative::before {
  content: '';
  display: block;
  padding-top: 100%; /* Обеспечивает квадратные пропорции */
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Встроенное применение представляется следующим образом:

<div class="container-relative">
  <div class="content">
    <!-- Ваше содержимое, которое прекрасно преобразится -->
  </div>
</div>

Наследуем тенденции: aspect-ratio

Если вы стремитесь к актуальности и используете новейшие свойства браузеров, вам будет полезно свойство aspect-ratio:

.modern-box {
  width: 100%; /* Ширина подстраивается под размеры контейнера */
  aspect-ratio: 1 / 1; /* Квадратные пропорции для пионеров дизайна */
}

Фокусы с размерами на vw/vh

Применяйте единицы vw и vh, которые основаны на размерах окна браузера, для достижения идеальных пропорций:

.viewport-box {
  width: 50vw;
  height: 50vw; /* Высота соответствует ширине, чтобы сохранить соотношение сторон 1:1 */
}

Эти уловки позволят блоку всегда сохранять квадратные пропорции.

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

Представим, что вам нужно поддерживать отношение сторон телевизионного экрана при любой его диагонали:

 Диагональ экрана            Соотношение сторон (Ширина:Высота)
 ------------            --------------------------
|📺 32"                  |   16:9                    |
|📺 50"                  |   16:9                    |
|📺 75"                  |   16:9                    |

Под это задание хорошо подойдёт следующий код CSS:

.element {
  width: 100%; /* Занимает всю доступную ширину */
  height: 0;   /* Изначальная высота равна нулю */
  padding-top: 56.25%; /* Идеальное значение для экранов с соотношением 16:9 */
}

Здесь padding-top приходит к помощи как ассистент-маг, который автоматически приводит высоту элемента в соответствие с его шириной.

Практический подход и размышления

Вариации соотношения сторон

Протестируйте различные значения padding-top для достижения именно тех пропорций, которые вам нужны:

• Используйте padding-top: 75% для классического соотношения 4:3.
• Для кинематографического соотношения 16:9 оптимально использовать padding-top: 56.25%.

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

Динамическое изменение размеров с JavaScript

Дополните методику следящими за изменением размера окна событиями JavaScript или jQuery. Это позволяет поддерживать пропорции элемента в актуальном состоянии.

Кроссбраузерность

Не забудьте проверять поддержку актуальных свойств, например aspect-ratio, на ресурсах вроде caniuse.com.

Адекватное позиционирование

Для эффективного абсолютного позиционирования тщательно продумайте использование класса .content. Это обеспечит идеальное вписывание содержимого в пространство, выделенное псевдоэлементом.

Эксперименты в целях практики

Используйте такие песочницы как CodePen или JSFiddle для экспериментов с пропорциями и настройками вашего кода.

Полезные ресурсы

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