JS - Относительная высота элемента

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>