Aspect Ratio

The AspectRatio component provides a wrapper that can be constrained to a specific aspect ratio. It is especially useful for embedded images and videos.

Example

Preview

16:9

Code

import React from 'react';
import { AspectRatio } from '@hv/ui/aspect-ratio';

export default function AspectRatioExample({ ratio = '16:9' }) {
  const ratioNum = {
    '1:1': 1,
    '3:2': 3 / 2,
    '4:3': 4 / 3,
    '9:16': 9 / 16,
    '16:9': 16 / 9,
  };

  return (
    <AspectRatio ratio={ratioNum[ratio]} className='bg-gray-300'>
      <img
        src='/img/beauty1.jpg'
        alt='sample image'
        className='h-full w-full object-cover'
      />
      <div className='absolute inset-0 flex items-center justify-center text-2xl font-bold text-white'>
        {ratio}
      </div>
    </AspectRatio>
  );
}

Configurations

Property	Description	Type
className	Custom CSS classes for styling the container	String
ratio	The aspect ratio of the container	Number