Персональный блог
JS - Относительная высота элемента
Однажды суровым зимним вечером передо мной встала задача сделать блок с соотношением сторон 4:3. При этом блок
должен был быть адаптивным, следовательно его ширина постоянно менялась, чтобы решить эту задачу я написал
простенький скрипт. Через некоторое время я доработал скрипт, так чтобы его можно было использовать для любого
соотношения и этим скриптом я с вами и сегодня поделюсь.
В данном скрипте я использую JQuery, так что не забудьте его подключить.
Cкачать скрипт
Использование
Добавлением к элементу дата атрбут data-ratio-height="4:3", где 4 — это ширина а 3-высота
Пример
<div class="block-1" data-ratio-height="4:3">
Block 4:3
</div>
<div class="block-2" data-ratio-height="16:9">
Block 16:9
</div>