Skip to content
Related Articles

Related Articles

CSS | scale() Function
  • Last Updated : 07 Aug, 2019

The scale() function is an inbuilt function which is used to resize the element in 2D plane. It scales the elements in horizontal and vertical directions.

Syntax:

scale( sx )

or

scale( sx, sy )

Parameters:

  • sx: It resizes the elements in horizontal plane.
  • sy: It resizes the elements in vertical plane. If value of sy is not defined then the resize the element sx in both direction (horizontal and vertical).

Below examples illustrate the scale() function in CSS:
Example 1:






<!DOCTYPE html> 
<html
<head
    <title>CSS scale() function</title
    <style
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .scale_image {
            transform: scale(1.5);
        }
    </style
</head
  
<body
    <h1>GeeksforGeeks</h1>
    <h2>CSS scale() function</h2>
    <br><br>
    <img class="scale_image" src
        alt="GeeksforGeeks logo"
</body
</html>

Output:

Example 2:




<!DOCTYPE html> 
<html
<head
    <title>CSS scale() function</title
    <style
        body {
            text-align:center;
        }
        h1 {
            color:green;
        }
        .GFG {
            font-size:35px;
            font-weight:bold;
            color:green;
            transform: scale(1, 2);
        }
    </style
</head
  
<body
    <h1>GeeksforGeeks</h1>
    <h2>CSS scale() function</h2>
  
    <div class="GFG">Welcome to GeeksforGeeks</div
</body
</html>

Output:

Supported Browsers: The browsers supported by scale() function are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera

Attention reader! Don’t stop learning now. Get hold of all the important DSA concepts with the DSA Self Paced Course at a student-friendly price and become industry ready.

My Personal Notes arrow_drop_up
Recommended Articles
Page :