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