Aspect Ratio

zyra-aspect-ratio

Locks a box’s width-to-height proportions using the padding-bottom technique, so it degrades correctly even without native aspect-ratio support.

400 by 300 demo image

API

All inputs and configuration options for zyra-aspect-ratio.

PropTypeDefaultDescription
ratioAspectRatioValue'16/9'Number or "w/h" / "w:h" string
objectFit'cover' | 'contain' | 'fill' | 'none' | 'scale-down''cover'Applied to a directly-projected img/video
overflowHiddenbooleantrueClips content to the ratio box

Accessibility

Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.

  • Projected images still need their own meaningful `alt` text