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 from which the computer scales an element.
  • 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 defines 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

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 Editing It

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 Editing It

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.

Buy CSS Grid book

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

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

Try Editing It

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 Editing It

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

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

CSS scale() Function vs. scale Property: What's the Difference?​

The CSS scale() function and the CSS scale property provide two similar ways to specify a scale transformation.

The main differences between the two scaling techniques are as follows:

  • The CSS scale property allows scaling an element without using the CSS transform property.
  • The CSS scale property's syntax is shorter than its function alternative.
  • The CSS scale property saves you from remembering the specific order to position the transform functions.
  • Browsers calculate the transform functions' matrix in the order you assigned them to the CSS transform property—from left to right.
  • Browsers calculate the transform properties' matrix in the following transformation matrix order:
    1. translate
    2. rotate
    3. scale

Here's an example:

Use the CSS scale property to scale an element nonuniformly along the X- and Y-axis.

img {
  scale: 0.3 65%; /* Equal to a transform: scale(0.3, 65%) property */
  transform-origin: top left;
}

Try Editing It

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

note

A none value tells browsers not to scale the selected element.

Overview​

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