Object Fit

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

Contain

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>

Cover

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>

Fill

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>

Fill

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>

Responsive

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.