Aspect Ratio
A component for maintaining consistent width-to-height ratios across different screen sizes.
Source Tailwind CSS
package showcase
import "github.com/templui/templui/components/aspectratio"
templ AspectRatioDefault() {
@aspectratio.AspectRatio(aspectratio.Props{
Ratio: aspectratio.RatioVideo,
Class: "rounded-md overflow-hidden",
}) {
<img
src="/assets/img/aspect_ratio_placeholder.jpeg"
alt="Example image"
class="h-full w-full object-cover"
/>
}
}
Installation
templui add aspectratioimport "github.com/templui/templui/components/aspectratio"API Reference
Required parameter
Hover for description
AspectRatio
Component for maintaining consistent width-to-height ratios across different screen sizes.
| Name | Type | Default |
|---|---|---|
Unique identifier for the aspect ratio element. | | - |
Additional CSS classes to apply to the aspect ratio container. | | - |
Additional HTML attributes to apply to the aspect ratio element. | | - |
Aspect ratio preset. Options: 'auto', 'square', 'video', 'portrait', 'wide'. | | |
