Изменение размеров div с сохранением пропорций: CSS решение

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

Для того чтобы элемент div при изменении размера окна сохранял пропорции, примените свойство aspect-ratio в совокупности с относительной шириной. Например:

.div-ratio {
  width: 100%; /* Гибкая ширина для любых устройств */
  aspect-ratio: 16 / 9; /* Пропорции, аналогичные экрану — 16:9 */
}

<div class="div-ratio"></div>

Таким образом, будет сохраняться соотношение сторон 16:9, характерное для широкоформатных экранов, независимо от изменения размеров окна просмотра.

Трюк с padding-top для сохранения пропорций

Ранее вы, вероятно, сталкивались с методикой использования padding-top для сохранения пропорций? Вот как она работает:

.aspect-ratio-box {
  position: relative;
  width: 100%; /* Ширина всего экрана для максимального визуального восприятия */
  padding-top: 56.25%; /* Делим высоту на ширину (9 / 16 = 0.5625) и сохраняем соотношение 16:9 */
}

.aspect-ratio-box > .content {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0; /* Заполняем всю область родительского блока */
}

<div class="aspect-ratio-box">
  <div class="content">Ваш контент выглядит превосходно, пропорции сохранены!</div>
</div>

Использование метода с padding-top позволяет сохранить заданное соотношение сторон благодаря ширине контейнера.

Свойство display и магическая сила псевдоэлементов

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

.ratio-container::before {
  content: '';
  display: block;
  padding-top: 56.25%; /* Магия сохранения соотношения сторон 16:9 */
}

.ratio-container > .content {
  position: absolute;
  top: 0;
  width: 100%; height: 100%; /* Мы занимаем всю область родительского блока */
}

Псевдоэлемент ::before создает «невидимый» слой, который служит основанием для пропорций, а содержимое благодаря абсолютному позиционированию целиком заполняет указанный объем.

Применение единиц измерения Viewport

Единицы измерения Viewport — vw и vh — представляют собой настоящее спасение для достижения действительно адаптивных размеров текста и элементов. Они прекрасно вписываются под размеры окна просмотра:

.responsive-text {
  font-size: 4vw; /* Размер текста меняется в соответствии с шириной окна */
}

.fluid-div {
  width: 50vw; /* Занимает половину ширины окна */
  height: 50vh; /* и половину его высоты */
}

С помощью единиц измерения Viewport можно обеспечить сохранение пропорций не только для контейнеров, но и для элементов типографики, а также их адаптивности к размерам.

Max/Min-width и height для установления адаптивных ограничений

Применяйте max/min-width и max/min-height, чтобы задать максимальные и минимальные пределы изменения размеров элемента:

.bounded-ratio-div {
  width: 80%; /* Элемент масштабируется осознанно */
  max-width: 800px;
  min-width: 300px;
  aspect-ratio: 16 / 9;
}

Такая стратегия позволяет элементу меняться в размерах, при этом сохраняя свои пропорции и избегая слишком крупных или мелких форм.

Решение проблем верстки с помощью clearfix

Clearfix может эффективно устранить некоторые проблемы верстки у элементов с float, особенно в адаптивном дизайне. Он помогает родительскому блоку принимать во внимание свои «плавающие» дочерние элементы:

.clearfix::after {
  content: '';
  display: table;
  clear: both; /* Очистка в верстке */
}

Clearfix гарантирует, что плавающие элементы не выходят за пределы родительского элемента, что великолепно сочетается с сохранением соотношения сторон.

Переиспользуемые CSS-классы для задания соотношения сторон

Создавайте переиспользуемые CSS-классы для удобства сохранения пропорций и соблюдения принципа DRY (Don't Repeat Yourself, то есть "Не повторяй себя"). Это поможет сохранить ваш HTML-код чистым и аккуратным:

.aspect-ratio-16-9 {
  aspect-ratio: 16 / 9; /* Просто добавьте класс — и пропорции 16:9 сохранены */
}

.aspect-ratio-4-3 {
  aspect-ratio: 4 / 3; /* Также легко сохранить и пропорции 4:3 */
}

/* Используйте классы для div, чтобы задать нужное соотношение */
<div class="aspect-ratio-16-9"></div>
<div class="aspect-ratio-4-3"></div>