Aspect Ratio

With Image

Photo by Drew Beamer
  <%= render RailsUi::AspectRatio::Component.new(
  ratio: 16.0 / 9.0,
  image_src: "https://images.unsplash.com/photo-1588345921523-c2dcdb7f1dcd?w=800&dpr=2&q=80",
  image_alt: "Photo by Drew Beamer"
) %>

With content

Custom content here

  <%= render RailsUi::AspectRatio::Component.new(ratio: 4.0 / 3.0) do %>
  <div class="flex items-center justify-center h-full">
    <p>Custom content here</p>
  </div>
<% end %>
Previous Next