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

aspect-ratio
sm
md
lg
xl

Классы

Класс Значение
aspect-1x1 aspect-ratio: 1 / 1
aspect-1x2 aspect-ratio: 1 / 2
aspect-2x1 aspect-ratio: 2 / 1
aspect-2x3 aspect-ratio: 2 / 3
aspect-3x1 aspect-ratio: 3 / 1
aspect-3x2 aspect-ratio: 3 / 2
aspect-3x4 aspect-ratio: 3 / 4
aspect-4x1 aspect-ratio: 4 / 1
aspect-4x3 aspect-ratio: 4 / 3
aspect-16x9 aspect-ratio: 16 / 9
aspect-9x16 aspect-ratio: 9 / 16

Описание

Модификатор изменяет соотношение сторон элемента.

Использование: {условие действия}:{модификатор}

  • Условие действия. Необязательный параметр. Определяет условие действия модификатора. Может принимать значения:
    • sm — для экранов small и больше.
    • md — для экранов medium и больше.
    • lg — для экранов large и больше.
    • xl — для экранов extra large и больше.
  • Модификатор. Обязательный параметр.
    • aspect-1x1 — соотношение сторон 1 к 1
    • aspect-3x4 — соотношение сторон 3 к 4
    • aspect-16x9 — соотношение сторон 16 к 9

Пример

1x1
1x2
2x1
2x3
3x1
3x2
3x4
4x1
4x3
16x9
9x16 
<div class="aspect-1x1">1x1</div>
<div class="aspect-1x2">1x2</div>
<div class="aspect-2x1">2x1</div>
<div class="aspect-2x3">2x3</div>
<div class="aspect-3x1">3x1</div>
<div class="aspect-3x2">3x2</div>
<div class="aspect-3x4">3x4</div>
<div class="aspect-4x1">4x1</div>
<div class="aspect-4x3">4x3</div>
<div class="aspect-16x9">16x9</div>
<div class="aspect-9x16">9x16</div>

Адаптивность

Для установки соотношения сторон элементов, начиная с определенного размера области просмотра, добавьте префикс контрольной точки ( sm, md, lg, xl ) через двоеточие (:) к модификатору.

Например, воспользуйтесь модификатором md:aspect-ratio-3x4 для установки соотношения сторон 3x4 элементов для экранов размером Medium и больше.

<div class="md:aspect-ratio-3x4"></div>

Для получения дополнительной информации об адаптивности ознакомьтесь с документацией.

Изменить статью