Aspect Ratio
Displays content within a desired ratio.
Usage
16/9
AspectRatio(aspect_ratio: "16/9", class: "rounded-md overflow-hidden border shadow-sm") do img( alt: "Placeholder", loading: "lazy", src: helpers.image_path('pattern.jpg') ) end
Copied!
Copy failed!
4/3
AspectRatio(aspect_ratio: "4/3", class: "rounded-md overflow-hidden border shadow-sm") do img( alt: "Placeholder", loading: "lazy", src: helpers.image_path('pattern.jpg') ) end
Copied!
Copy failed!
1/1
AspectRatio(aspect_ratio: "1/1", class: "rounded-md overflow-hidden border shadow-sm") do img( alt: "Placeholder", loading: "lazy", src: helpers.image_path('pattern.jpg') ) end
Copied!
Copy failed!
21/9
AspectRatio(aspect_ratio: "21/9", class: "rounded-md overflow-hidden border shadow-sm") do img( alt: "Placeholder", loading: "lazy", src: helpers.image_path('pattern.jpg') ) end
Copied!
Copy failed!
Components
Component | Built using | Source |
---|---|---|
AspectRatio | Phlex |