objectFit

The objectFit class name utility function is used to create responsive images and videos within the current content box with support for enforcing specific aspect ratios.

See the ResponsiveItem component for an alternative solution.

Simple Example

To create a responsive image or video, set the className to objectFit. The default behavior will use object-fit: contain.

import { Box } from "@react-md/core/box/Box";
import { Card } from "@react-md/core/card/Card";
import { objectFit } from "@react-md/core/objectFit";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <Box align="stretch" grid fullWidth>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/200/300?image=30"
          alt=""
          className={objectFit()}
        />
      </Card>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/300/200?image=3"
          alt=""
          className={objectFit()}
        />
      </Card>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/300?image=1008"
          alt=""
          className={objectFit()}
        />
      </Card>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/100/110?image=233"
          alt=""
          className={objectFit()}
        />
      </Card>
    </Box>
  );
}

import { Box } from "@react-md/core/box/Box";
import { Card } from "@react-md/core/card/Card";
import { objectFit } from "@react-md/core/objectFit";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <Box align="stretch" grid fullWidth>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/200/300?image=30"
          alt=""
          className={objectFit()}
        />
      </Card>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/300/200?image=3"
          alt=""
          className={objectFit()}
        />
      </Card>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/300?image=1008"
          alt=""
          className={objectFit()}
        />
      </Card>
      <Card align="center" justify="center">
        <img
          src="https://picsum.photos/100/110?image=233"
          alt=""
          className={objectFit()}
        />
      </Card>
    </Box>
  );
}

Custom Fit Behavior

The objectFit function supports the following object-fit values:

contain (default)
cover
fill
none
scale-down

Contain (default)

Cover

Fill

None

Scale Down

import { Box } from "@react-md/core/box/Box";
import { Card } from "@react-md/core/card/Card";
import { objectFit } from "@react-md/core/objectFit";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function CustomFitBehavior(): ReactElement {
  return (
    <>
      <Typography>Contain (default)</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
      </Box>
      <Typography>Cover</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
      </Box>
      <Typography>Fill</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
      </Box>
      <Typography>None</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
      </Box>
      <Typography>Scale Down</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
      </Box>
    </>
  );
}

import { Box } from "@react-md/core/box/Box";
import { Card } from "@react-md/core/card/Card";
import { objectFit } from "@react-md/core/objectFit";
import { Typography } from "@react-md/core/typography/Typography";
import { type ReactElement } from "react";

export default function CustomFitBehavior(): ReactElement {
  return (
    <>
      <Typography>Contain (default)</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "contain" })}
          />
        </Card>
      </Box>
      <Typography>Cover</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "cover" })}
          />
        </Card>
      </Box>
      <Typography>Fill</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "fill" })}
          />
        </Card>
      </Box>
      <Typography>None</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "none" })}
          />
        </Card>
      </Box>
      <Typography>Scale Down</Typography>
      <Box align="stretch" grid fullWidth>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/200/300?image=30"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300/200?image=3"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/300?image=1008"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
        <Card align="center" justify="center">
          <img
            src="https://picsum.photos/100/110?image=233"
            alt=""
            className={objectFit({ fit: "scale-down" })}
          />
        </Card>
      </Box>
    </>
  );
}

Aspect Ratios

The objectFit class name utility function supports setting the aspect ratio using the aspect-ratio property. 16-9, 4-3, and 1-1 are supported out of the box, but can be configured by changing the core.$object-fit-aspect-ratios map.

import { Box } from "@react-md/core/box/Box";
import { Card } from "@react-md/core/card/Card";
import { objectFit } from "@react-md/core/objectFit";
import { type ReactElement } from "react";

import styles from "./AspectRatios.module.scss";

export default function AspectRatios(): ReactElement {
  return (
    <Box className={styles.container} grid fullWidth>
      <Card>
        <img
          src="https://picsum.photos/400/300?image=3"
          alt=""
          className={objectFit({ aspectRatio: "16-9" })}
        />
      </Card>
      <Card>
        <img
          src="https://picsum.photos/400/300?image=3"
          alt=""
          className={objectFit({ aspectRatio: "4-3" })}
        />
      </Card>
      <Card>
        <img
          src="https://picsum.photos/300/400?image=3"
          alt=""
          className={objectFit({ aspectRatio: "1-1" })}
        />
      </Card>
    </Box>
  );
}

import { Box } from "@react-md/core/box/Box";
import { Card } from "@react-md/core/card/Card";
import { objectFit } from "@react-md/core/objectFit";
import { type ReactElement } from "react";

import styles from "./AspectRatios.module.scss";

export default function AspectRatios(): ReactElement {
  return (
    <Box className={styles.container} grid fullWidth>
      <Card>
        <img
          src="https://picsum.photos/400/300?image=3"
          alt=""
          className={objectFit({ aspectRatio: "16-9" })}
        />
      </Card>
      <Card>
        <img
          src="https://picsum.photos/400/300?image=3"
          alt=""
          className={objectFit({ aspectRatio: "4-3" })}
        />
      </Card>
      <Card>
        <img
          src="https://picsum.photos/300/400?image=3"
          alt=""
          className={objectFit({ aspectRatio: "1-1" })}
        />
      </Card>
    </Box>
  );
}

@use "@react-md/core" with (
  $object-fit-aspect-ratios: (
    // these are the defaults
    "16-9": 16 9,
    "4-3": 4 3,
    "1-1": 1 1,
  )
);

// this is only required for this demo
.container {
  :global {
    @include core.object-fit-styles;
  }
}

@use "@react-md/core" with (
  $object-fit-aspect-ratios: (
    // these are the defaults
    "16-9": 16 9,
    "4-3": 4 3,
    "1-1": 1 1,
  )
);

// this is only required for this demo
.container {
  :global {
    @include core.object-fit-styles;
  }
}