Aspect Ratio

Utilities for set dimension of aspect ratio to an element.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
aspect-ratio-1/1	aspect-ratio: 1/1
aspect-ratio-1/2	aspect-ratio: 1/2
aspect-ratio-2/1	aspect-ratio: 2/1
aspect-ratio-4/3	aspect-ratio: auto 4/3
aspect-ratio-16/9	aspect-ratio: 16/9
aspect-ratio-21/9	aspect-ratio: 21/9

Usage

Ratio 1:1

Ratio 1:2

Ratio 2:1

Ratio 4:3

Ratio 16:9

Ratio 21:9

<div class="aspect-ratio-21/9 ... width-32 ... bg-tint-granite-5">
  ...
</div>

HTML

.dummy {
  @extend
    .aspect-ratio-21/9,
    .width-32,
    .bg-tint-granite-5;
}

SCSS

<div class="aspect-ration-21/9 ... width-32 ... object-cover object-center ... flex justify-center items-center ... bg-tint-granite-5 ... border border-tint-granite-1">
  ...
</div>

HTML

.dummy {
  @extend
    .aspect-ratio-21/9,
    .width-32,
    .object-cover,
    .object-center,
    .flex,
    .justify-center,
    .items-center,
    .bg-tint-granite-5,
    .border border-tint-granite-1
}

SCSS