Skip to main content

CSS scale() Function – How to Resize Elements in CSS

scale() transforms an element by resizing (scaling) it two-dimensionally from a fixed point.

note
  • Transform origin is the fixed point around which an element rotates.
  • You can define your element's fixed point using the CSS transform-origin property. But the default is center.

Syntax of the CSS scale() Function​

scale() accepts two arguments. Here is the syntax:

element {
  transform: scale(x, y);
}

Note the following:

  • The x argument can be a number or percentage. It specifies the element's scaling factor along the x-axis.
  • The y argument can also be a number or percentage. It specifies the element's scaling factor along the x-axis.
  • Y-axis' default value is x. Therefore, if you do not provide a y argument, the browser automatically uses x's value.
  • Suppose x and y are equal. In that case, browsers will scale your element uniformly and preserve its aspect ratio.
  • Whenever you include scaling or zooming animations in your app, provide users an option to turn off animations. This option is necessary because scaling and zooming animations cause accessibility issues.

Illustration of the 2D Cartesian coordinate system

A two-dimensional Cartesian coordinate system showing the X- and Y-axis
Buy CSS Flexbox book

Examples of the CSS scale() Function​

Below are some examples of how the CSS scale() function works.

How to scale an element uniformly along the X- and Y-axis in CSS​

img {
  transform: scale(0.3);
  transform-origin: left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.3 scaling factor for the image element along the X- and Y-axis.

note
  • scale(0.3) is equivalent to scale(0.3, 0.3).
  • The percentage equivalence of scale(0.3) is scale(30%).

How to scale an element nonuniformly along the X- and Y-axis in CSS​

img {
  transform: scale(0.3, 65%);
  transform-origin: top left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.3 scaling factor for the image along the X-axis and 65% along the Y-axis.

How to scale an element along only the X-axis​

img {
  transform: scale(0.3, 1);
  transform-origin: top left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.3 scaling factor for the image along only the X-axis.

note
  • A scale factor of 1 or 100% tells browsers not to apply any scaling effect on the selected element.
  • scale(0.3, 1) is equivalent to scaleX(0.3).

How to scale an element along only the Y-axis​

img {
  transform: scale(100%, 0.2);
  transform-origin: top left;
}

Try it on StackBlitz

The snippet above used the scale() function to specify a 0.2 scaling factor for the image along only the Y-axis.

note
  • A scale factor of 100% or 1 tells browsers not to apply any scaling effect on the selected element.
  • scale(100%, 0.2) is equivalent to scaleY(0.2).

Overview​

This article discussed what a CSS scale() function is. We also used examples to see how it works.