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 aspectratioCopy and paste the following code into your project:
package aspectratio import "github.com/axzilla/templui/internal/utils" type Ratio string const ( RatioAuto Ratio = "auto" RatioSquare Ratio = "square" RatioVideo Ratio = "video" RatioPortrait Ratio = "portrait" RatioWide Ratio = "wide" ) type Props struct { ID string Class string Attributes templ.Attributes Ratio Ratio } templ AspectRatio(props ...Props) { {{ var p Props }} if len(props) > 0 { {{ p = props[0] }} } <div if p.ID != "" { id={ p.ID } } class={ utils.TwMerge( "relative w-full", ratioClass(p.Ratio), p.Class, ), } { p.Attributes... } > <div class="absolute inset-0"> { children... } </div> </div> } func ratioClass(ratio Ratio) string { switch ratio { case RatioSquare: return "aspect-square" case RatioVideo: return "aspect-video" case RatioPortrait: return "aspect-[3/4]" case RatioWide: return "aspect-[2/1]" default: return "aspect-square" } }Update the import paths to match your project setup.