CSS scale() Function – How to Resize Elements in CSS
scale() transforms an element by resizing (scaling) it two-dimensionally from a fixed point.
- 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 ay
argument, the browser automatically usesx
's value. - Suppose
x
andy
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.
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
- CSS
- HTML
img {
transform: scale(0.3);
transform-origin: left;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
The snippet above used the scale()
function to specify a 0.3
scaling factor for the image element along the X- and Y-axis.
scale(0.3)
is equivalent toscale(0.3, 0.3)
.- The percentage equivalence of
scale(0.3)
isscale(30%)
.
How to scale an element nonuniformly along the X- and Y-axis in CSS
- CSS
- HTML
img {
transform: scale(0.3, 65%);
transform-origin: top left;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
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
- CSS
- HTML
img {
transform: scale(0.3, 1);
transform-origin: top left;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
The snippet above used the scale()
function to specify a 0.3
scaling factor for the image along only the X-axis.
- A scale factor of
1
or100%
tells browsers not to apply any scaling effect on the selected element. scale(0.3, 1)
is equivalent toscaleX(0.3)
.
How to scale an element along only the Y-axis
- CSS
- HTML
img {
transform: scale(100%, 0.2);
transform-origin: top left;
}
<img
src="https://cdn.pixabay.com/photo/2022/09/26/23/26/african-american-7481724_960_720.jpg"
alt=""
/>
The snippet above used the scale()
function to specify a 0.2
scaling factor for the image along only the Y-axis.
- A scale factor of
100%
or1
tells browsers not to apply any scaling effect on the selected element. scale(100%, 0.2)
is equivalent toscaleY(0.2)
.
Overview
This article discussed what a CSS scale()
function is. We also used examples to see how it works.