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

Примеры

Базовый пример

Используйте утилиты aspect-<ratio>, такие как aspect-3/2, чтобы задать элементу определенное соотношение сторон:

Измените размер примера, чтобы увидеть ожидаемое поведение

<img class="aspect-3/2 object-cover ..." src="/img/villas.jpg" />

Использование соотношения сторон видео

Используйте утилиту aspect-video, чтобы задать элементу видео соотношение сторон 16/9:

<iframe class="aspect-video ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Использование пользовательского значения

Используйте синтаксис aspect-[<value>] , чтобы задать aspect ratio на основе полностью пользовательского значения:

<img class="aspect-[calc(4*3+1)/3] ..." src="/img/villas.jpg" />

Для переменных CSS вы также можете использовать синтаксис: aspect-(<custom-property>)

<img class="aspect-(--my-aspect-ratio) ..." src="/img/villas.jpg" />

Это просто сокращение, aspect-[var(<custom-property>)] которое автоматически добавляет функцию var().

Адаптивный дизайн

Префикс an aspect-ratio утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:

<iframe class="aspect-video md:aspect-square ..." src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

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

Кастомизация вашей темы

Используйте переменные темы --aspect-* для настройки утилит aspect ratio в вашем проекте:

@theme {  --aspect-retro: 4 / 3; }

Теперь утилиту aspect-retro можно использовать в вашей разметке:

<iframe class="aspect-retro" src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe>

Подробнее о настройке темы читайте в документации темы.