Aspect Ratio

A component for maintaining consistent width-to-height ratios across different screen sizes.

TailwindCSS

package showcase

import "github.com/axzilla/templui/internal/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 aspectratio

API Reference

Required parameter

Hover for description

AspectRatio

Component for maintaining consistent width-to-height ratios across different screen sizes.

Name	Type	Default
`ID` Unique identifier for the aspect ratio element.	`string`	-
`Class` Additional CSS classes to apply to the aspect ratio container.	`string`	-
`Attributes` Additional HTML attributes to apply to the aspect ratio element.	`templ.Attributes`	-
`Ratio` Aspect ratio preset. Options: 'auto', 'square', 'video', 'portrait', 'wide'.	`Ratio`	`auto`

Getting Started

Components

Aspect Ratio

Installation

API Reference

AspectRatio