Alexanevsky
@Alexanevsky
Любительская web-разработка

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

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

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

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

С уважением,
Александр.
  • Вопрос задан
  • 48629 просмотров
Решения вопроса 2
iusfof
@iusfof
Front-end developer
если использовать 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
Ответ написан
Комментировать
xakplant
@xakplant
Автор сайта xakplant.ru
Думаю что вопрос актуальный. Так что напишу.
Есть библиотека 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 -->
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
Зачем скрипты? Можно ведь обычным css'ом обойтись:
jsfiddle.net/qso14y3k

Один минус - 2 дополнительные обёртки для каждого блока. Но это не смертельно. Фокус этот работает по стандартам, так что работать должен везде.
Также эта техника входит в toolkit, который написан ребятами, которые написали Singularity.
Ответ написан
Trow_eu
@Trow_eu
если ширина 100% вьюпорта, то можно использовать 40vw
codepen.io/anon/pen/GEziv
Ответ написан
Комментировать
@whats
Высота блока в процентах и так рассчитывается от ширины контейнера
learn.javascript.ru/height-percent
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы