Aspect Ratio

The most common video aspect ratio, achieved by setting Ratio to 16.0/9.0. The container maintains this proportion as it scales, making it ideal for hero images, video embeds, and media cards. Use object-cover on the child image to prevent distortion.

A perfect square ratio using Ratio="1". Square containers are commonly used for avatar images, profile pictures, and thumbnail grids. The default Ratio value is 1, so you can omit it entirely for square containers.

The traditional photo ratio using 4.0/3.0, widely used in photography and presentation slides. This ratio works well for placeholder content areas and image galleries where a more balanced proportion is preferred over the wider 16:9 format.

An ultrawide cinematic ratio using 21.0/9.0, suitable for panoramic banners and cinematic hero sections. This wide format draws attention horizontally and works well at the top of landing pages or as full-width promotional sections.

A real-world composition combining AspectRatio with a Card to create a media card layout. The AspectRatio ensures the image area maintains a consistent 16:9 proportion regardless of card width, while the card body provides structured content below.