Масштабирование высоты под ширину в CSS: решение для Google Maps

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

Если стоит задача синхронизировать высоту и ширину элемента, обратите внимание на свойство aspect-ratio (работает в новейших браузерах) или на метод padding-top сконструированного для более широкой поддержки браузерами.

"Модный" способ с aspect-ratio:

.rectangle {
  aspect-ratio: 1 / 2; /* Строго поддерживаем пропорции */
}

"Традиционный" подход с padding-top:

.rectangle-container:before {
  content: '';
  display: block;
  padding-top: 50%; /* Высота вдвое меньше ширины, заметили? */
}
.rectangle-content {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Как применять в HTML:

<div class="rectangle">Широкий элемент тоже хорош, но высота лучше ❄️!</div>

<!-- или вот так — старый добрый padding-top -->
<div class="rectangle-container">
  <div class="rectangle-content">Приспосабливаюсь, словно хамелеон 🦎</div>
</div>

Оба метода— aspect-ratio и padding-top — позволят вам добиться идеального согласования высоты элемента со его шириной.

Власть пропорций

Свойство CSS aspect-ratio особенно удобно для создания реактивных элементов, которые сохраняют свои пропорции при изменении размеров окна браузера. Но не забывайте, что применение свойства во многом зависит от поддержки браузерами, так что не забывайте проверять!

Скрытые возможности padding-bottom

Если задумываетесь о padding-bottom как только о способе расширить пространство, у вас есть возможность открыть для себя новые возможности. Установив его в процентах, превращаете этот атрибут в мастера адаптивной высоты, основанной на ширине блока-родителя. Скрывался важный функционал прямо на виду, не так ли?

Встречаем единицы вьюпорта

Если aspect-ratio и padding-bottom не нашли своего применения в вашем проекте, единицы вьюпорта могут прийти на помощь. Единица vw (viewport width) позволяет установить адаптивную высоту, которая изменяется в зависимости от размера элемента, что напоминает превращения Алисы 🍄.

Используем динамику с JavaScript

Если CSS не даёт достаточных возможностей или требуется больший контроль, в дело вступает JavaScript. С помощью window.addEventListener можно динамически изменять размеры элемента, а с помощью document.getElementById управлять стилями, как виртуоз-кукловод.

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

Идеальное масштабирование элемента соблюдаёт пропорции его формы. Ширина (📏): |----------|
Высота (📏): |--------|

Соответствие сторон элемента — это рамка, подчёркивающая перфекционизм вашего изображения!

Некорректное масштабирование: Пропорции элемента нарушены. Ширина (📏): |--------------|
Высота (📏): |----|

Помните, что рамка должна быть сохранена. Ваш CSS обязательно должен соответствовать заданной форме, не допуская искажений!

В помощь свойство position

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

Будьте внимательны, обычные проблемы встречаются повсеместно

Всегда будьте осмотрительны и оценивайте возможные побочные эффекты вашего CSS. Установка высоты в auto или процентах может привести к неожиданному "схлопыванию" элементов, подобно нестабильной башне в игре "Дженга". Убедитесь, что ваш код устойчив при изменении масштаба.

Дальше базового масштабирования

Вы не забрасывайте подальше масштабирование. Исседуйте ещё более сложные приёмы и методы. Экспериментируйте с preserveAspectRatio в SVG, пробуйте object-fit для фоновых изображений с помощью CSS. В конце концов, более сложные задачи обещают более впечатляющие результаты.

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

1. Aspect Ratio Boxes | CSS-Tricks — Подробное разбор создания элементов с заданным соотношением сторон в CSS.
2. preserveAspectRatio – SVG: Scalable Vector Graphics | MDN — Руководство MDN по использованию атрибута preserveAspectRatio в SVG.
3. Creating Intrinsic Ratios for Video – A List Apart — Как сохранять пропорции для видео.
4. How To – Aspect Ratio / Height Equal to Width — Основы создания элементов с фиксированными пропорциями в адаптивном дизайне.
5. html – Maintain the aspect ratio of a div with CSS – Stack Overflow — Обсуждение и решения задачи сохранения пропорций элемента.
6. Simple Responsive Images With CSS Background Images — Smashing Magazine — Способы поддержки адаптивности фоновых изображений.
7. object-fit | Codrops — Энциклопедический справочник по свойству object-fit.