CSS scale() function

Definition and usage

CSS scale() This function is used to scale elements (width and height).

scale() This function defines the scaling values of the element in the x and y directions.

scale() function in transform used in the attribute.

Instance

Example 1

Use scale() Zoom multiple <div> elements:

#myDiv1 {
  transform: scale(0.7);
}
#myDiv2 {
  transform: scale(110%);
}
#myDiv3 {
  transform: scale(1.1, 0.5);
}

Try it yourself

Example 2

Use scale() Zoom image:

#img1 {
  transform: scale(0.7);
}
#img2 {
  transform: scale(110%);
}
#img3 {
  transform: scale(1.1, 0.5);
}

Try it yourself

CSS Syntax

scale(sx, sy)
Value Description
sx Required. Number or percentage. Specifies the scaling vector for width.
sy

Optional. Number or percentage. Specifies the scaling vector for height.

If omitted, the value is set to the same as sx.

Technical details

Version: CSS Transforms Module Level 1

Browser support

The numbers in the table indicate the browser version that first fully supports this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Related pages

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS scale property

Reference:CSS scale3d() function

Reference:CSS scaleX() function

Reference:CSS scaleY() function