DocsComponentsAspect ratio

Aspect ratio

Keeps its content at a given ratio.

1 file

<div class="w-full max-w-md">
  <pb-ui.aspect-ratio ratio="16 / 9" class="rounded-lg bg-muted">
    <div class="absolute inset-0 grid place-items-center bg-gradient-to-br from-primary/20 to-muted text-sm text-muted-foreground">16 / 9</div>
  </pb-ui.aspect-ratio>
</div>

Installation

pyblade-ui add aspect-ratio

Copy this file into your project

components/ui/aspect_ratio.html

@props({'ratio': '16 / 9'})
<div data-slot="aspect-ratio" style="aspect-ratio: {{ ratio }}" {{ attributes.cn("relative w-full overflow-hidden") }}>{{ slot }}</div>

Update the path to fit your project
The components folder is the one set in pyblade.toml.

Usage

The tag <pb-ui.aspect-ratio> is available in all your templates.

<pb-ui.aspect-ratio ratio="16 / 9" class="rounded-lg bg-muted">
  <img src="/photo.jpg" alt="" class="size-full object-cover" />
</pb-ui.aspect-ratio>

Examples

Square

<div class="w-40">
  <pb-ui.aspect-ratio ratio="1" class="rounded-lg border bg-muted">
    <div class="absolute inset-0 grid place-items-center text-sm text-muted-foreground">1 / 1</div>
  </pb-ui.aspect-ratio>
</div>

Props

Prop	Default
ratio	'16 / 9'

Any other attribute (class, id, x-on:click, hx-post…) is passed to the root element; your Tailwind classes win over the component's.

‹ Progress Scroll area ›