Course recommendation:

CSS scale() function

Definition and usage scale() CSS's

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

scale() The function defines the scaling values of the element in the x and y directions. transform used in properties.

Instance

Example 1

Using 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

Using 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 the width.
sy

Optional. Number or percentage. Specifies the scaling vector for the 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

Manual:CSS 2D transformation

Reference:CSS transform egenskab

Reference:CSS scale egenskab

Reference:CSS scale3d() funktion

Reference:CSS scaleX() funktion

Reference:CSS scaleY() funktion