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 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 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
100%
or1
scale factor tells browsers not to apply any scaling effect on the selected element. scale(100%, 0.2)
is equivalent toscaleY(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 CSStransform
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:translate
rotate
scale
Here's an example:
Use the CSS scale
property to scale an element nonuniformly along the X- and Y-axis.
- CSS
- HTML
img {
scale: 0.3 65%; /* Equal to a transform: scale(0.3, 65%) property */
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
property to specify a 0.3
scaling factor for the image along the X-axis and 65%
along the Y-axis.
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.