shadcn-rails

Aspect Ratio

Displays content within a desired ratio.

No JavaScript Required
Photo by Drew Beamer

Installation

Add the component to your project:

rails generate shadcn:component aspect_ratio

Usage

<%= render Shadcn::AspectRatioComponent.new(ratio: 16.0/9.0, class_name: "bg-muted") do %>
  <img src="https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80" alt="Photo" class="h-full w-full rounded-md object-cover" />
<% end %>

Examples

16:9 (Widescreen)

Common for video content and landscape images.

16:9

4:3 (Standard)

Traditional TV and monitor ratio.

4:3

1:1 (Square)

Perfect for profile pictures and thumbnails.

1:1

2:3 (Portrait)

Common for portrait photos and movie posters.

2:3

With Image

Landscape
Dogs

Video Embed Placeholder

Use with iframes for responsive video embeds.

Video Player

Map Placeholder

Map Embed

API Reference

API Reference

Prop Type Default Description
ratio Float 1 Aspect ratio (width/height). e.g., 16.0/9.0 for widescreen
class_name String nil Additional CSS classes to apply

Common Ratios

Name Ratio Value Use Case
Square 1 Profile pictures, thumbnails
4:3 4.0/3.0 Standard photos
16:9 16.0/9.0 Video, widescreen
21:9 21.0/9.0 Ultrawide, cinematic
2:3 2.0/3.0 Portrait, movie posters

Accessibility

  • AspectRatio is a layout container and has no semantic meaning
  • Ensure content inside (images, videos) has appropriate alt text or labels
  • Uses CSS padding technique for consistent aspect ratios across browsers