t-aspect-ratio

This component contains its content in a specific aspect ratio.

Basic usage

I'm a 9/16 Box!

<TAspectRatio ratio={9 / 16}>
    <TCard design="outlined">I'm a 9/16 Box!</TCard>
</TAspectRatio>

Usage with Image Grid

<TGrid cols="3" gap="2">
    <TAspectRatio ratio="1">
        <TImage src="https://source.unsplash.com/500x500/?newyork" />
    </TAspectRatio>
    <TAspectRatio ratio="1">
        <TImage src="https://source.unsplash.com/500x500/?dubai" />
    </TAspectRatio>
    <TAspectRatio ratio="1">
        <TImage src="https://source.unsplash.com/500x500/?london" />
    </TAspectRatio>
</TGrid>

API

No options available

Components

t-app

Components

t-avatar

Table of Contents