Object Fit

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

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

Contain

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

<> <template preview> <x.div bg="rose-300" borderRadius="md" overflow="hidden"> <x.img h={48} w={1} objectFit="contain" src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80" alt="" /> </x.div> </template> <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".

<> <template preview> <x.div bg="indigo-300" borderRadius="md" overflow="hidden"> <x.img h={48} w={1} objectFit="cover" src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80" alt="" /> </x.div> </template> <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".

<> <template preview> <x.div bg="indigo-300" borderRadius="md" overflow="hidden"> <x.img h={48} w={1} objectFit="fill" src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80" alt="" /> </x.div> </template> <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".

<> <template preview> <x.div bg="amber-300" borderRadius="md" overflow="hidden"> <x.img h={48} w={1} objectFit="none" src="https://images.unsplash.com/photo-1490079027102-cd08f2308c73?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=285&h=285&q=80" alt="" /> </x.div> </template> <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.

Edit this page on GitHub