Notice: Trying to get property 'params' of non-object in /var/www/blog/data/www/septdir.ru/templates/yootheme_septdir/templates/header.php on line 22
Игорь «Septdir» Бердичевский
Игорь «Septdir» Бердичевский
Персональный блог

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

JS - Относительная высота элемента
Однажды суровым зимним вечером передо мной встала задача сделать блок с соотношением сторон 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>
Дата публикции: 31.03.2017
Дата обновления: 11.02.2021

Copyright © Игорь «Septdir» Бердичевский 2013-2021
Development by Septdir Workshop