Aspect Ratio
Displays content within a desired ratio.
Usage
16/9
![Placeholder](/assets/pattern-e7a93d1410d5dfb096472f5e3267d6ce991518323b65d0dbaf42788c85dbdcf3.jpg)
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
![Placeholder](/assets/pattern-e7a93d1410d5dfb096472f5e3267d6ce991518323b65d0dbaf42788c85dbdcf3.jpg)
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
![Placeholder](/assets/pattern-e7a93d1410d5dfb096472f5e3267d6ce991518323b65d0dbaf42788c85dbdcf3.jpg)
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
![Placeholder](/assets/pattern-e7a93d1410d5dfb096472f5e3267d6ce991518323b65d0dbaf42788c85dbdcf3.jpg)
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 |