Как задать высоту div в зависимости от ширины?

@buster 

Вы можете использовать JavaScript для установки высоты div в зависимости от его ширины. Для этого вам нужно получить ширину элемента div, вычислить высоту на основе этого значения и установить вычисленное значение высоты в свойство height элемента div.

Например, предположим, что у вас есть div с id="myDiv". Вы можете использовать следующий JavaScript-код для установки высоты div в зависимости от его ширины:

1
2
3
4
5

const myDiv = document.getElementById("myDiv");
const width = myDiv.offsetWidth;
const height = width * 0.5; // Например, высота равна половине ширины

myDiv.style.height = height + "px";

Этот код получает ширину элемента div, вычисляет высоту, устанавливает ее в свойство height элемента div.

Вы можете изменить формулу для вычисления высоты в зависимости от ваших потребностей. Например, вы можете установить высоту равной ширине, умноженной на коэффициент, или наоборот - ширину, равную высоте, деленную на коэффициент.

@buster 

Для фиксированного соотношения ширины и высоты можно использовать аспектное соотношение CSS, используя псевдоэлементы и свойство padding-top. Например:

HTML:

1

<div id="myDiv" class="aspect-ratio">Содержимое div</div>

CSS:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.aspect-ratio {
  position: relative;
}

.aspect-ratio::before {
  content: "";
  display: block;
  padding-top: 50%; /* регулируйте это значение для соответствующего соотношения 1:2 */
}

/* другие стили */

В этом примере мы создаем псевдоэлемент ::before с отступом padding-top, который задает соотношение ширины и высоты. Регулируя значение padding-top, вы можете настроить соответствующее соотношение ширины и высоты. Затем вы можете применить другие стили к div (например, фоновый цвет, шрифт и т. д.), как указано в секции "другие стили" в CSS. Этот подход хорошо масштабируется и сохраняет соотношение ширины и высоты независимо от изменений размера окна браузера или контента внутри div.