Aspect Ratio — uicraft

16:9

Standard widescreen aspect ratio, commonly used for videos and hero images.

html

16:9

<div class="uc-aspect-[16/9] uc-rounded-2xl uc-border uc-overflow-hidden">
  <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
</div>

4:3

Classic display ratio, used for traditional photos and thumbnails.

html

4:3

<div class="uc-aspect-[4/3] uc-rounded-2xl uc-border uc-overflow-hidden">
  <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
</div>

1:1 (Square)

Perfect square ratio, ideal for profile pictures and app icons.

html

1:1

<div class="uc-aspect-square uc-rounded-2xl uc-border uc-overflow-hidden">
  <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
</div>

21:9 (Ultrawide)

Ultrawide cinematic ratio, used for panoramic banners and movie content.

html

21:9

<div class="uc-aspect-[21/9] uc-rounded-2xl uc-border uc-overflow-hidden">
  <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
</div>

With Image

Aspect ratio container with gradient background simulating an image with object-cover behavior.

html

Image with object-cover

<div class="uc-aspect-[16/9] uc-rounded-2xl uc-border uc-overflow-hidden">
  <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
</div>

Gallery Grid

Consistent image grid using aspect-square containers with different gradient backgrounds.

html

<div class="uc-grid uc-grid-cols-3 uc-gap-3">
  <div class="uc-aspect-square uc-rounded-2xl uc-border uc-overflow-hidden">
    <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
  </div>
  <div class="uc-aspect-square uc-rounded-2xl uc-border uc-overflow-hidden">
    <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
  </div>
  <div class="uc-aspect-square uc-rounded-2xl uc-border uc-overflow-hidden">
    <img src="..." alt="..." class="uc-w-full uc-h-full uc-object-cover" />
  </div>
  ...
</div>

API Reference

All CSS classes available for the Aspect Ratio component.

Class	Type	Description
`uc-aspect-[16/9]`	Base	Widescreen 16:9 aspect ratio
`uc-aspect-[4/3]`	Base	Classic 4:3 aspect ratio
`uc-aspect-square`	Base	Square 1:1 aspect ratio
`uc-aspect-[21/9]`	Base	Ultrawide 21:9 cinematic ratio
`uc-object-cover`	Modifier	Scales image to cover container, cropping as needed

Accessibility

Keyboard and screen reader support.

Feature	Details
Images	Always provide descriptive alt text on img elements
Decorative	Use alt="" and aria-hidden="true" for purely decorative images
Responsive	Aspect ratio containers maintain proportions — no content clipping on resize