Aspect Ratio

Container that maintains a specific aspect ratio.

Usage

<w-aspect-ratio ratio="16/9">
  <img src="video-thumbnail.jpg" alt="Video" />
</w-aspect-ratio>

Props

Prop	Type	Default	Description
ratio	string	"1/1"	Aspect ratio (width/height)

Common Ratios

• 1/1 - Square
• 4/3 - Standard video
• 16/9 - Widescreen
• 21/9 - Ultrawide
• 2/3 - Portrait photo
• 3/2 - Landscape photo

Layout

The container is set to display: block; position: relative; width: 100%; aspect-ratio: <ratio> automatically, and any direct child (or <w-slot body> content) is absolutely positioned to fill the box with object-fit: cover. These defaults use :where() (zero specificity) so any class or inline style on the child overrides them.

Examples

Video Container

<w-aspect-ratio ratio="16/9">
  <iframe src="https://youtube.com/embed/..." allowfullscreen></iframe>
</w-aspect-ratio>

Responsive Image

<w-aspect-ratio ratio="4/3">
  <img src="photo.jpg" alt="Description" />
</w-aspect-ratio>

Styling

The library positions direct children absolutely to fill the box (with object-fit: cover). You usually don't need any CSS unless you want to override object-fit or add aesthetic treatment to the child.

/* Override the default object-fit on direct children */
w-aspect-ratio > img {
  object-fit: contain;
}

Selector	Targets
w-aspect-ratio > :not(w-slot)	Direct content (positioned by lib)
w-aspect-ratio > w-slot[body] > *	Slot-wrapped content (same)