Scale

Utilities for scaling elements with transform.

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.

<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.