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>
);
}
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>
</>
);
}
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.