Object Fit

Utilities for controlling how a replaced element's content should be resized.

React propsCSS Properties
objectFit={keyword}object-fit: {keyword};


Resize an element's content to stay contained within its container using objectFit="contain".

<x.div bg="rose-300"> <x.img objectFit="contain" h={48} w="100%" /> </x.div>


Resize an element's content to cover its container using objectFit="cover".

<x.div bg="rose-300"> <x.img objectFit="cover" h={48} w="100%" /> </x.div>


Stretch an element's content to fit its container using objectFit="fill".

<x.div bg="indigo-300"> <x.img objectFit="fill" h={48} w="100%" /> </x.div>


Display an element's content at its original size ignoring the container size usingobjectFit="none".

<x.div bg="amber-300"> <x.img objectFit="none" h={48} w="100%" /> </x.div>


To control how a replaced element's content should be resized only at a specific breakpoint, use responsive object notation. For example, adding the property objectFit={{ md: "contain" }} to an element would apply the objectFit="contain" utility at medium screen sizes and above.

<x.div objectFit={{ md: 'contain' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Edit this page on GitHub