- Components
- aspect-ratio
Aspect Ratio
Utility component to maintain specific dimensions for images or videos.
Demo
<x-ui.aspect aspect="video">
<img src="/images/img2.webp" class="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu">
</x-ui.aspect>Installation
Shell
flexi-cli add aspectExamples
Square
<x-ui.aspect aspect="square">
<img src="/images/img2.webp" class="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu">
</x-ui.aspect>Video
<x-ui.aspect aspect="video">
<img src="/images/img2.webp" class="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu">
</x-ui.aspect>Standard TV
<x-ui.aspect aspect="standard-tv">
<img src="/images/img2.webp" class="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu">
</x-ui.aspect>35mm film
<x-ui.aspect aspect="35mm-film">
<img src="/images/img2.webp" class="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu">
</x-ui.aspect>Ultra wide
<x-ui.aspect aspect="ultrawide">
<img src="/images/img2.webp" class="w-full h-full object-cover rounded-lg" width="2400"
alt="Image by Johnnathan Tshibangu">
</x-ui.aspect>References
Props
The aspect ratio component accepts the following props. The aspect
prop is
required.
| Prop | Type | Default | Description |
|---|---|---|---|
aspect
|
string | 'video' |
The aspect ratio of the container. Can be one of the predefined values or a custom aspect ratio
class.
Predefined values:
|
class
|
string | '' |
Additional CSS classes to apply to the aspect ratio container.
|