Phlex Components
x
1
2
3
4
5
6
7
<div>
  <div class="w-96">
    <div class="relative w-full" style="padding-bottom: 100.0%;">
      <div class="bg-muted absolute inset-0 [&>img]:object-cover [&>img]:absolute [&>img]:h-full [&>img]:w-full [&>img]:inset-0 [&>img]:text-transparent"><img alt="Placeholder" loading="lazy" src="/assets/pattern-5f5dd643.jpg"></div>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
render(TestView.new) do
  div(class: "w-96") do
    AspectRatio(aspect_ratio: "1/1") do |aspect_ratio|
      aspect_ratio.img(alt: "Placeholder", loading: "lazy", src: helpers.image_path("pattern.jpg"))
    end
  end
end

AspectRatio 1/1

No params configured.