Aspect Ratio
Displays content within a desired ratio.
Ratio : 16/9
Ratio : 1/1
Ratio : 7/10 (Poster movie)
ℹ️
To ensure consistency in image sizes across the website, the following aspect ratios will be prioritized: 16/9 , 1/1 , 4/3 , 2/3 , 7/10 , 3/2 , 5/2, 8/3, 8/5
Usage
import {
AspectRatio,
} from "@momo-webplatform/mobase";<AspectRatio ratio={16 / 9} className="bg-gray-100">
<img
src="https://homepage.momocdn.net/img/momo-amazone-s3-api-240826102539-638602647398348446.jpg"
loading='lazy'
alt="Cùng lập quỹ nhóm với MoMo"
className="h-full w-full object-cover"
/>
</AspectRatio>API Reference
AspectRatio component extends Radix Aspect Ratio (opens in a new tab) component and supports all of its props.
AspectRatio
| Prop | Type | Default | Required |
ratio | number | -- | false |
asChild | enumboolean | -- | false |
Features
- Accepts any custom ratio.
- All images used on the website and in articles, blogs, videos, posters, will adhere to the predefined aspect ratios mentioned above