Aspect Ratio

Displays content within a desired ratio.

import { component$, useStyles$ } from '@builder.io/qwik';
import { AspectRatio } from 'qwik-primitives';
import styles from './styles.css?inline';

export const AspectRatioDemo = component$(() => {
  useStyles$(styles);

  return (
    <div class="aspect-ratio-wrapper">
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <img
            class="aspect-ratio-image"
            src="https://images.unsplash.com/photo-1535025183041-0991a977e25b?w=300&dpr=2&q=80"
            alt="Landscape photograph by Tobias Tullius"
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </div>
  );
});

.aspect-ratio-wrapper {
  width: 18.75rem;
  border-radius: 0.25rem;
  overflow: hidden;
  box-shadow:
    0 0 0 1px #00104010,
    0 2px 3px -2px #00104010,
    0 3px 12px -4px #0000001a,
    0 4px 16px -8px #0000001a;
}

.aspect-ratio-image {
  user-select: none;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

Features

Accepts any custom ratio.

Import

import { AspectRatio } from 'qwik-primitives';

Anatomy

Import all parts and piece them together.

import { component$ } from '@builder.io/qwik';
import { AspectRatio } from 'qwik-primitives';

const AspectRatioDemo = component$(() => {
  return (
    <AspectRatio.Root>
      <AspectRatio.Content />
    </AspectRatio.Root>
  );
});

API Reference

Root

Contains all the parts of an aspect ratio. This component is based on the div element.

Prop	Default	Type
`as`	No default value	`FunctionComponent` Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.
`ratio`	`1`	`number` The desired ratio, e.g. `16 / 9`.
`style`	No default value	`CSSProperties` The inline style for the element.

Data attribute	Values
`[data-scope]`	`"aspect-ratio"`
`[data-part]`	`"root"`

Content

Contains the content you want to constrain to a given ratio. This component is based on the div element.

Prop	Default	Type
`as`	No default value	`FunctionComponent` Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.
`style`	No default value	`CSSProperties` The inline style for the element.

Data attribute	Values
`[data-scope]`	`"aspect-ratio"`
`[data-part]`	`"content"`

Examples

Iframe embed

You can limit to a certain ratio any content, for example, image or inline frame element.

import { component$ } from '@builder.io/qwik';
import { AspectRatio } from 'qwik-primitives';

const AspectRatioDemo = component$(() => {
  return (
    <div style={{ width: '18.75rem', overflow: 'hidden' }}>
      <AspectRatio.Root ratio={16 / 9}>
        <AspectRatio.Content>
          <iframe
            src="https://www.youtube.com/embed/2yJgwwDcgV8?si=KwBAFYZpeWUf3EOA"
            title="YouTube video player"
            style={{ objectFit: 'cover', height: '100%', width: '100%', border: 'none' }}
            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
          />
        </AspectRatio.Content>
      </AspectRatio.Root>
    </div>
  );
});