CSS: поддержание соотношения сторон div с адаптацией экрана

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

Для сохранения пропорций блока при его растягивании на весь экран, используйте единицы vw для определения ширины и функцию calc() для расчета высоты в CSS:

.fullscreen-ratio {
  width: 100vw;
  height: calc(100vw * (9 / 16)); /* замените (9 / 16) на желаемое соотношение сторон */
}

Примените данный стиль к div:

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

Таким образом, вы получите блок, полностью занимающий ширину экрана и сохраняющий пропорции 16:9. При необходимости соотношение (9 / 16) можно изменить на любое другое.

Единицы просмотра: супергерои CSS

Единицы просмотра (vw, vh) являются мощным инструментом для достижения адаптивности в CSS. Чтобы блок занял как можно больше пространства на экране, установите max-width и max-height, учитывая его размеры:

.fullscreen-ratio {
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
}

Вертикальное и горизонтальное центрирование: первый камень преткновения в CSS

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

.fullscreen-ratio {
  display: flex;
  justify-content: center; /* Горизонтальное центрирование */
  align-items: center; /* Вертикальное центрирование */
}

Поддержка браузеров: не оставляем без поддержки ни одного супергероя CSS

Не все CSS-свойства поддерживаются всеми браузерами, поэтому проверьте совместимость на caniuse.com. Будьте готовы применить альтернативные решения для обеспечения лучшей кроссбраузерности.

Волшебный заклинания для сохранения пропорций

Для унифицированной работы с блоками используйте миксины или функции в CSS-препроцессорах:

// Миксин в SCSS – это секретный способ сохранения пропорций
@mixin aspect-ratio($width, $height) {
  position: relative;
  &:before {
    content: '';
    display: block;
    padding-top: calc((100% / ($width / $height)));
  }
  > .content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

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

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

🖼: [ Содержимое Div ]
🖥: { Границы экрана }

Холст должен идеально вписаться в рамку, полностью заполнив пространство, не нарушая при это пропорции производства искусства.

Когда размеры мира не фиксированы

Используйте медиа-запросы для адаптации стилей к различным размерам экранов:

@media (max-width: 768px) {
  .fullscreen-ratio {
    font-size: calc(1rem + 2vw); /* Динамический размер текста */
  }
}

@media (orientation: portrait) {
  .fullscreen-ratio {
    height: calc(100vh);
    width: calc(100vh * (16 / 9)); /* Адаптация под портретный режим */
  }
}

object-fit: Зеркало Эризеда

Используйте object-fit для видео и изображений, чтобы они могли заполнять блок, поддерживая при этом пропорции:

.fullscreen-media {
  object-fit: cover;
}

Тонкие оттенки на фоне

Создавайте градиенты или узоры на фоне, таким образом подчеркивая пропорции:

.background-indicator {
  background: linear-gradient(45deg, #ccc 25%, transparent 25%),
              linear-gradient(-45deg, #ccc 25%, transparent 25%);
}

Поддерживаем старые браузеры: работа с устаревшими браузерами

Для старых версий браузеров применяйте проверенные временем методы поддержания пропорций:

.legacy-ratio {
  padding-bottom: 56.25%; /* 16:9 */
  position: relative;
}
.legacy-ratio > .content {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

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

Мастерство применения: точные вычисления

Экспериментируйте с комбинированием rem и vw для гибкого масштабирования текста:

.scalable-text {
  font-size: calc(1rem + 0.5vw);
}

И наконец, наставления от @Danield

Проанализируйте обсуждение @Danield на Stack Overflow для более глубокого понимания работы с пропорциями.

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

1. Aspect Ratio Boxes | CSS-Tricks — комплексное руководство по работе с пропорциями.
2. aspect-ratio – CSS: Cascading Style Sheets | MDN — описание CSS свойства aspect-ratio.
3. How To – Aspect Ratio / Height Equal to Width | W3Schools — практические уроки по работе с пропорциями.
4. html – Maintain the aspect ratio of a div with CSS – Stack Overflow — обсуждение способов сохранения пропорций блока.
5. Creating Intrinsic Ratios for Video – A List Apart — специализированные решения для работы с видео.
6. Fluid Width Video | CSS-Tricks — создание адаптивных видеоплееров.
7. Understanding and Using rem Units — SitePoint — подробное руководство по использованию единиц rem в CSS.