shadcn-rails

Aspect Ratio

Displays content within a desired ratio.

No JavaScript Required
Photo by Drew Beamer
aspect-ratio/default 
<div class="w-[200px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 1, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">1:1</div>
  <% end %>
</div>

Installation

Add the component to your project:

rails generate shadcn:add aspect_ratio

Usage

<div class="w-[200px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 1, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">1:1</div>
  <% end %>
</div>

Examples

16:9 (Widescreen)

Common for video content and landscape images.

16:9
<div class="w-[300px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 16.0/9.0, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">16:9</div>
  <% end %>
</div>

4:3 (Standard)

Traditional TV and monitor ratio.

4:3
<div class="w-[300px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 4.0/3.0, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">4:3</div>
  <% end %>
</div>

1:1 (Square)

Perfect for profile pictures and thumbnails.

1:1
<div class="w-[200px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 1, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">1:1</div>
  <% end %>
</div>

2:3 (Portrait)

Common for portrait photos and movie posters.

2:3
<div class="w-[200px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 2.0/3.0, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">2:3</div>
  <% end %>
</div>

With Image

Landscape
Dogs 
<div class="grid gap-4 grid-cols-2 max-w-xl">
  <div>
    <%= render Shadcn::AspectRatioComponent.new(ratio: 1, class_name: "overflow-hidden rounded-md") do %>
      <img src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80" alt="Landscape" class="h-full w-full object-cover" />
    <% end %>
  </div>
  <div>
    <%= render Shadcn::AspectRatioComponent.new(ratio: 1, class_name: "overflow-hidden rounded-md") do %>
      <img src="https://images.unsplash.com/photo-1548199973-03cce0bbc87b?w=300&dpr=2&q=80" alt="Dogs" class="h-full w-full object-cover" />
    <% end %>
  </div>
</div>

Video Embed Placeholder

Use with iframes for responsive video embeds.

Video Player

<div class="w-full max-w-lg">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 16.0/9.0, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center">
      <div class="text-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="mx-auto text-muted-foreground"><polygon points="5 3 19 12 5 21 5 3"/></svg>
        <p class="text-sm text-muted-foreground mt-2">Video Player</p>
      </div>
    </div>
  <% end %>
</div>

Map Placeholder

Map Embed

<div class="w-full max-w-lg">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 2, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center">
      <div class="text-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="mx-auto text-muted-foreground"><polygon points="3 6 9 3 15 6 21 3 21 18 15 21 9 18 3 21"/><line x1="9" x2="9" y1="3" y2="18"/><line x1="15" x2="15" y1="6" y2="21"/></svg>
        <p class="text-sm text-muted-foreground mt-2">Map Embed</p>
      </div>
    </div>
  <% end %>
</div>

Square (1:1)

Photo by Drew Beamer
aspect-ratio/square 
<div class="w-[200px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 1, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">1:1</div>
  <% end %>
</div>

Portrait (3:4)

Photo by Drew Beamer
aspect-ratio/portrait 
<div class="w-[200px]">
  <%= render Shadcn::AspectRatioComponent.new(ratio: 1, class_name: "bg-muted rounded-md") do %>
    <div class="flex h-full w-full items-center justify-center text-muted-foreground">1:1</div>
  <% end %>
</div>

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