Astryx Aspect Ratio

Maintains a fixed width-to-height ratio for its children, regardless of screen size, from Meta's Astryx design system. Use it for media containers like videos, images, thumbnails, or any content that needs consistent proportions. Supports rectangle and ellipse shapes.

Astryxby

Meta

'use client';

import AspectRatio from '@/components/ui/astryx-aspect-ratio';
import {Theme} from '@astryxdesign/core/theme';
import {neutralTheme} from '@astryxdesign/theme-neutral/built';
import {Center} from '@astryxdesign/core/Center';

export default function AspectRatioCircleImage() {
  return (
    <Theme theme={neutralTheme}>
      <div
        style={{
          minHeight: '100dvh',
          display: 'grid',
          placeItems: 'center',
          padding: 24,
        }}>
        <Center width={300}>
          <AspectRatio ratio={1} shape="ellipse">
            <img
              src="https://lookaside.facebook.com/assets/astryx/light-home-square-1.png"
              alt="Circular image"
              style={{
                width: '100%',
                height: '100%',
                objectFit: 'cover',
              }}
            />
          </AspectRatio>
        </Center>
      </div>
    </Theme>
  );
}