Автоподстройка высоты div под размер фона: динамический CSS

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

Я применил CSS, чтобы div автоматически подстраивался под пропорции фонового изображения:

<div class="responsive-background"></div>

.responsive-background {
  background: url('image.jpg') no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* Для соотношения сторон 16:9 */
}

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

Магия CSS: динамическая высота для вложенного контента

Если в div нужно разместить контент, требующий адаптируемости, можно использовать следующую технику CSS для увеличения гибкости контейнера:

.responsive-background::after {
  content: "";
  display: block;
  padding-bottom: 56.25%;
}

Полноценная адаптивность с применением viewport

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

.responsive-background {
  height: calc(100vw * (9 / 16));
}

Так, высота div будет подстраиваться в зависимости от ширины viewport, обеспечивая идеальную адаптуруемость.

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

// Предположим, что div – это воздушный шар (🎈), а фоновое изображение – воздух (💨)

// Накачиваем воздух:
🎈<-💨 

// Воздушный шар расширяется:
🎈

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

Продвинутое, но надежное: наложение и позиционирование контента

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

.responsive-background {
  position: relative;
}

.overlay-content {
  position: absolute;
}

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

Стратегии профессионалов для достижения гибкости

Метод "скрытого" изображения

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

<div class="responsive-background">
  <img src="image.jpg" aria-hidden="true" style="visibility: hidden; position: absolute;"/>
</div>

Браузер загрузит картинку, но она будет невидимой, и при этом влиять на высоту div.

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

JavaScript для динамической настройки фона

Если вы предпочитаете использовать JavaScript для достижения динамичного контроля, воспользуйтесь следующим скриптом:

const image = new Image();
image.onload = function() {
  const heightRatio = this.height / this.width * 100;
  const div = document.querySelector('.responsive-background');
  div.style.paddingTop = `${heightRatio}%`;
};
image.src = 'image.jpg';

Предварительная обработка размеров изображений на сервере

Данный способ подразумевает, что сервер заранее обработает ключевые параметры размеров div:

<div class="responsive-background" style="padding-top: <%= calculatedHeightRatio %>%;">

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

1. Идеальное изображение на весь экран | CSS-Tricks
2. background-size – CSS: Каскадные таблицы стилей | MDN
3. Как создать изображение на весь экран
4. CSS Фон и границы модуль уровень 3
5. Простые адаптивные изображения с CSS фоновыми изображениями — Smashing Magazine
6. Блоки с соотношением сторон | CSS-Tricks
7. Увеличьте этот фон, пожалуйста! – A List Apart