Aspect Ratio

Keeps content at a fixed ratio using the CSS aspect-ratio property.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add aspect-ratio --yes

The aspect-ratio registry item installs these files:

app/components/ui_component.rb
app/components/ui/aspect_ratio_component.rb
app/helpers/ui/aspect_ratio_helper.rb
vendor/shadwire/shadwire.css

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

<%= ui_aspect_ratio(ratio: "16 / 9") do %>
  <%= image_tag "cover.jpg", class: "h-full w-full object-cover" %>
<% end %>

Examples

Default

Constrains the content to a 16 / 9 ratio.

16 / 9

<%= ui_aspect_ratio(ratio: "16 / 9", class: "w-72 overflow-hidden rounded-md border bg-muted") do %>
  <div class="flex h-full w-full items-center justify-center text-sm font-medium text-muted-foreground">16 / 9</div>
<% end %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`AspectRatio`	`ratio`	`1`	Width over height: a number (`16.0 / 9`) or a string (`"16 / 9"`).