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
-
Economics & Finance
The CSS scale() Function
The CSS scale() function is used to define a transformation that resizes an element on the 2D plane. You can specify the amount of scaling in the X and Y directions as parameters to create larger or smaller versions of elements.
Syntax
transform: scale(x-scale, y-scale); transform: scale(uniform-scale);
Possible Values
| Value | Description |
|---|---|
x-scale |
Horizontal scaling factor (1 = original size) |
y-scale |
Vertical scaling factor (optional) |
uniform-scale |
Single value for both X and Y scaling |
Example: Increasing Image Size
The following example uses scale(1.2, 1.3) to increase the image width by 20% and height by 30% −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
display: flex;
gap: 20px;
align-items: flex-start;
margin: 20px 0;
}
.image-box {
text-align: center;
}
.scaled-up {
transform: scale(1.2, 1.3);
}
img {
width: 100px;
height: 80px;
border: 2px solid #ddd;
}
</style>
</head>
<body>
<h3>Image Scaling Comparison</h3>
<div class="container">
<div class="image-box">
<p>Original</p>
<div style="width: 100px; height: 80px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border: 2px solid #ddd;"></div>
</div>
<div class="image-box">
<p>Scaled (1.2, 1.3)</p>
<div class="scaled-up" style="width: 100px; height: 80px; background: linear-gradient(45deg, #ff6b6b, #4ecdc4); border: 2px solid #ddd;"></div>
</div>
</div>
</body>
</html>
Two colored boxes appear side by side. The second box is visibly larger than the first, demonstrating the scaling effect.
Example: Decreasing Element Size
The following example uses scale(0.7) to uniformly reduce an element to 70% of its original size −
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 200px;
height: 100px;
background-color: #3498db;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 20px;
border-radius: 8px;
font-weight: bold;
}
.scaled-down {
transform: scale(0.7);
}
</style>
</head>
<body>
<div class="card">Original Card</div>
<div class="card scaled-down">Scaled Down Card</div>
</body>
</html>
Two blue cards appear. The second card is noticeably smaller (70% of original size) while maintaining the same proportions.
Example: Different X and Y Scaling
This example demonstrates different scaling values for width and height using scale(1.5, 0.8) −
<!DOCTYPE html>
<html>
<head>
<style>
.text-box {
width: 150px;
height: 80px;
background-color: #e74c3c;
color: white;
display: flex;
align-items: center;
justify-content: center;
margin: 20px auto;
font-size: 16px;
}
.stretched {
transform: scale(1.5, 0.8);
}
</style>
</head>
<body>
<div class="text-box">Normal Box</div>
<div class="text-box stretched">Stretched Box</div>
</body>
</html>
Two red boxes appear. The second box is wider (150% width) but shorter (80% height), creating a stretched appearance.
Conclusion
The scale() function is essential for resizing elements in CSS. Values greater than 1 increase size, while values less than 1 decrease size. You can use one value for uniform scaling or two values for independent width and height scaling.
202 Views
