Rails UI

Content

Image

Best practices for displaying and manipulating images.

Responsive

Display images that scale proportionally relative to browser widths.

<img src="#" class="max-w-full h-auto">

<%= image_tag "...", class: "max-w-full", alt:"..." %>

%img.max-w-full{:alt => "...", :src => "..."}

Resize an element's content to cover it's container using .object-cover.

<div class="bg-slate-50...">
  <img src="#" class="object-cover h-48 w-96">
</div>

<div class="bg-slate-50...">
  <%= image_tag "#", class: "object-cover h-48 w-96" %>
</div>

.bg-slate-50
  image_tag "#", class: "object-cover h-48 w-96"

Resize an element’s content to stay contained within its container using .object-contain.

<div class="bg-slate-50...">
  <img src="#" class="object-contain h-48 w-96">
</div>

<div class="bg-slate-50...">
  <%= image_tag "#", class: "object-contain h-48 w-96" %>
</div>

.bg-slate-50
  image_tag "#", class: "object-contain h-48 w-96"

Stretch an element's content to fit its container .object-fill.

<div class="bg-slate-50...">
  <img src="#" class="object-fill h-48 w-96">
</div>

<div class="bg-slate-500...">
  <%= image_tag "#", class: "object-fill h-48 w-96" %>
</div>

.bg-slate-50
  image_tag "#", class: "object-fill h-48 w-96"

Display an element’s content at its original size but scale it down to fit its container if necessary using .object-scale-down.

<div class="bg-slate-50...">
  <img src="#" class="object-scale-down h-48 w-96">
</div>

<div class="bg-slate-50...">
  <%= image_tag "#", class: "object-scale-down h-48 w-96" %>
</div>

.bg-slate-50
  image_tag "#", class: "object-scale-down h-48 w-96"

Icons

Scaffold