Scale

Utilities for scaling elements with transform.

React propsCSS Properties
scale={ratio}--x-scale-x: {ratio};
--x-scale-y: {ratio};
scaleX={ratio}--x-scale-x: {ratio};
scaleY={ratio}--x-scale-y: {ratio};

Usage

Control the scale of an element by first enabling transforms with the transform utility, then specifying the scale using the scale={ratio}, scaleX={ratio}, and scaleY={ratio} utilities.

<> <template preview> <x.div display="flex" flexDirection={{ xs: 'column', md: 'row' }} justifyContent="space-around" spaceY={{ xs: 0, md: 12 }} spaceY={{ xs: 12, md: 0 }} my={10} > {[0.75, 1, 1.25, 1.5].map((scale) => ( <x.div key={scale} w={16} h={16} bg="indigo-300" borderRadius="md"> <x.img h={16} w={16} transform scale={scale} borderRadius="md" 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" /> </x.div> ))} </x.div> </template> <x.img transform scale={0.75} /> <x.img transform scale={1} /> <x.img transform scale={1.25} /> <x.img transform scale={1.5} /> </>

Responsive

To control the scale of an element at a specific breakpoint, use responsive object notation. For example, adding the property scale={{ md: 0.5 }} to an element would apply the scale={0.5} utility at medium screen sizes and above.

<x.div transform scale={{ md: 0.5 }} />

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

Edit this page on GitHub