Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
The CSS scale() Function
The scale() function in CSS is used to define a transformation that resizes an element on the 2D plane. Set the amount of scaling in each direction as the parameter of the scale() function.
The transform property is used to set the scale.
Syntax
The following is the syntax of the scale() −
transform: scale(width, height);
Above, scale along the width and height.
Increase the image size
In this example, we have set the transform property to scale the image size. The scale(1.2, 1.3) will increase the height and width of an image −
transform: scale(1.2, 1.3);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.scale_img {
transform: scale(1.2, 1.3);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (increased)</h2>
<img class="scale_img" src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
</body>
</html>
Decrease the image size
In this example, we have set the transform property to scale an image. The scale(0.3, 0.5) will decrease the width and height of an image −
transform: scale(0.3, 0.5);
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
.scale_img {
transform: scale(0.3, 0.5);
}
</style>
</head>
<body>
<h1>Scale an image</h1>
<h2>Original Image</h2>
<img src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
<h2>Scaled Image (decreased)</h2>
<img class="scale_img" src= "https://www.tutorialspoint.com/redis/images/redis.jpg" alt="Redis">
</body>
</html>
Increase the element size
In this example, we have set the transform property to scale the element size. The scale(1.2, 1.5) will increase the size of an element i.e. the width and height will get increased −
#demo6 {
transform: scale(1.2, 1.5);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: scale(1.2, 1.5);
text-align: center;
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
Decrease the element size
In this example, we have set the transform property to scale the element size. The scale(0.2, 0.3) will decrease the size of an element i.e. the width and height will get reduced −
#demo6 {
transform: scale(0.2, 0.3);
}
Example
Let us see the example −
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {background-color: hsla(140, 100%, 50%, 0.8);}
#demo2 {background-color: hsla(130, 100%, 50%, 0.6);}
#demo3 {background-color: hsla(190, 100%, 50%, 0.4);}
#demo4 {background-color: hsla(170, 100%, 50%, 0.3);}
#demo5 {background-color: hsl(150, 100%, 60%);}
#demo6 {
background-color:rgba(108,111,35,0.6);
font-size:35px;
color:yellow;
transform: scale(0.2, 0.3);
text-align: center;
}
</style>
</head>
<body>
<h1>Cricketers</h1>
<p id="demo1">David Warner</p>
<p id="demo2">Steve Smith</p>
<p id="demo3">Mark Waugh</p>
<p id="demo4">Steve Waugh</p>
<p id="demo5">David Johnson</p>
<p id="demo6">Australian Cricketers</p>
</body>
</html>
185 Views
