Made by ScaleRadix Homepage
Scale UI Radix
DocumentationDocumentationComponents CatalogComponents CatalogPlayroomPlayroom
Radix PrimitivesFont Awesome Icons
Components

Aspect Ratio

Displays content within a desired ratio.

View sourceReport an issueView in Catalog
Super Mario Bros
<AspectRatio ratio={16 / 8}>

  <img
    src="https://e.rpp-noticias.io/xlarge/2018/08/13/443244_661579.jpg"
    alt="Super Mario Bros"
    style={{
      objectFit: 'cover',
      width: '100%',
      height: '100%',
      borderRadius: 'var(--radius-2)',
    }}
  />

</AspectRatio>

API Reference

This component inherits props from the Aspect Ratio primitive.

PreviousAlert Dialog
NextAvatar
Edit this page on GitHub.