AspectRatio

Overview

The AspectRatio component ensures that its children maintain a specific width-to-height ratio, making it ideal for videos, images, or placeholders that need to be consistently sized across devices.

Preview

Preview

Code

import { AspectRatio } from './components/ui';

function MyComponent() {
  return (
    <AspectRatio ratio="16:9" maxWidth="400px">
      <img src={image} alt="Demo Image" className="object-cover w-full h-full" />
    </AspectRatio>
  );
}

Installation

npm

npx @mindfiredigital/ignix-ui add aspect-ratio

yarn

yarn @mindfiredigital/ignix-ui add aspect-ratio

pnpm

pnpm @mindfiredigital/ignix-ui add aspect-ratio

manual

import * as React from 'react';
import { cn } from '../../../utils/cn';

export interface AspectRatioProps extends React.HTMLAttributes<HTMLDivElement> {
ratio?: '1:1' | '4:3' | '16:9' | '21:9' | string;
maxWidth?: string | number;
children: React.ReactNode;
}

const parseRatio = (ratio: string) => {
const [w, h] = ratio.split(':').map(Number);
return w && h ? { w, h } : { w: 1, h: 1 };
};

const AspectRatio = React.forwardRef<HTMLDivElement, AspectRatioProps>(
({ ratio = '1:1', maxWidth, children, className, style, ...props }, ref) => {
const { w, h } = parseRatio(ratio);

const isAspectRatioSupported = typeof CSS !== 'undefined' && CSS.supports('aspect-ratio', '1/1');
const containerStyle: React.CSSProperties = {
  width: '100%',
  maxWidth: maxWidth,
  ...style,
};

if (isAspectRatioSupported) {
  containerStyle.aspectRatio = `${w} / ${h}`;
} else {
  containerStyle.position = 'relative';
  containerStyle.paddingBottom = `${(h / w) * 100}%`;
}

const contentStyle: React.CSSProperties = isAspectRatioSupported
  ? { width: '100%', height: '100%' }
  : {
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
    };

return (
  <div ref={ref} className={cn('aspect-ratio-container', className)} style={containerStyle} {...props}>
    <div style={contentStyle}>{children}</div>
  </div>
);
}
);

AspectRatio.displayName = 'AspectRatio';

export { AspectRatio }; 

Usage

Import the component:

import { AspectRatio } from './components/ui';

Basic Usage

function BasicAspectRatio() {
  return (
    <AspectRatio ratio="4:3" maxWidth="500px">
      <img src={image} alt="Demo Image" className="object-cover w-full h-full" />
    </AspectRatio>
  );
}

Variants

Ratio

Max Width

Preview

Code

    <AspectRatio ratio="16:9" maxWidth="400px">
    <img src={image} alt="Demo Image" />
    </AspectRatio>