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

Question

[Alexander Lashchevsky]

Здравствуйте!

Есть резиновый блок div (width: 100%;). Его высота должна быть пропорциональна его ширине. Например, если ширина 1000px, то высота 400px, если ширина 600px, то высота - 240px и тд.

Как это сделать?
Если необходимо, можно с использованием JS (jQ).

С уважением,
Александр.

Comments

[cccp-30]

Частный случай. Если ширина блока во весь экран.
Устанавливаем ширину width: vw100; а высоту в процентах от ширины, к примеру height: vw50;
Свойство calc расширяет возможности, к примеру height: calc(vw50 - 20px);
Во многих случаях достаточно CSS

Answer 1

[Дмитрий Ермолаев]

если использовать jQuery

$(function(){
  $('.some_block').height($('.some_block').width()/2.5);

  $(window).resize(function(){
    $('.some_block').height($('.some_block').width()/2.5);
  });
});

codepen.io/iusfof/pen/FxoBJ

Answer 2

[Борис Черепанов]

Думаю что вопрос актуальный. Так что напишу.
Есть библиотека Stickjaw.js
Подключаете в футоре и вызываете скриптов ( в документации написано, ни чего сложного )

Чтобы сделать высоту такой же как ширину нужно в блок добавить атрибут data-proportion-h="1". 1 - это пропорция. Если вам нужно сделать, чтобы высота была как две ширины то пишите 2 т.е data-proportion-h="2"

Например

<div data-proportion-h="1" style="widht:200px;"></div><!-- Высота 200px -->
<div data-proportion-h="2" style="widht:200px;"></div><!-- Высота 400px -->
<div data-proportion-h="0.5" style="widht:200px;"></div><!-- Высота 100px -->

Answer 3

[Алексей Карташов]

Зачем скрипты? Можно ведь обычным css'ом обойтись:
jsfiddle.net/qso14y3k

Один минус - 2 дополнительные обёртки для каждого блока. Но это не смертельно. Фокус этот работает по стандартам, так что работать должен везде.
Также эта техника входит в toolkit, который написан ребятами, которые написали Singularity.

Comments

[Кирилл Горлов]

Отличная штука - юзаю!!! Спасибо

[Алексей Клёнин]

Очень крутое и лаконичное решение. Спасибо вам большое.

Answer 4

[Trow_eu]

если ширина 100% вьюпорта, то можно использовать 40vw
codepen.io/anon/pen/GEziv

Answer 5

[whats]

Высота блока в процентах и так рассчитывается от ширины контейнера
learn.javascript.ru/height-percent

Comments

[Roman Cox]

где вы там такое прочитали? что за бред? в статье слово ширина используется 2 раза и ни разу не написано что высота считается в процентах от ширины, зачем путать людей?

Answer 6

[JRabbit]

Возможно 3 года назад это работало не везде, но сейчас уже нормально поддерживается css свойство aspect-ratio: 3 / 2;

просто указываем пропорции 1/1 - квадрат, 16/9 - прямоугольник и тп