Элементы

Соотношение сторон

Контейнер с фиксированным соотношением сторон (16:9, 4:3, 3:2, 1:1, 21:9) для картинок, видео и вставок.

aspect-ratio с версии 0.1.0

Примеры

Видео 16:9

Запись встречи 16:9

<div class="aspect aspect--16x9 aspect--shadow">
  <div class="aspect__fill" role="img" aria-label="Запись встречи, обложка">Запись встречи 16:9</div>
</div>

Соотношения 4:3 и 1:1

4:3

1:1

<div class="btns">
  <div class="aspect aspect--4x3"><div class="aspect__fill">4:3</div></div>
  <div class="aspect aspect--1x1"><div class="aspect__fill">1:1</div></div>
</div>

Установка

bukatchuk-ui add aspect-ratio

Вместе с компонентом установятся: tokens, fonts, base, button.

Файлы

Файл	Назначение
`aspect-ratio.css`	стили
`example.html`	образец разметки, в проект не копируется

Варианты

Класс	Назначение
`aspect--16x9`
`aspect--4x3`
`aspect--3x2`
`aspect--1x1`
`aspect--21x9`
`aspect--shadow`

Переменные

Переменная	Что задаёт
`--aspect`	соотношение сторон, например 16/9