CSS | zoom Property

Last Updated : 19 May, 2020

The zoom property in CSS is used to scale-up or scale-down the content. This property was implemented for Internet Explorer before the latter is supported by a few other browsers.

Syntax:

zoom: percentage | number | normal;

Property Value: This property accepts three types of values as mentioned above and described below:

percentage: This property holding the numbers with the percentage that will increased or decreased compared to the original content makes that zoom-in or out depending on the numbers like zoom:150%;. It means the content will be 150% percentage bigger than the original content.
number: This property holds the number that will be multiplied by the original content makes that zoom-in or out depending on the number like zoom:1.5;. It means the content will be 1.5 times bigger than the original content.
normal: This property holds the normal content which is not zoomed in or out, basically this property is telling the browsers zoom:1

Example: This example uses CSS zoom property to resize the image.

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        CSS | zoom property  
    </title>  
  
    <style>  
        h1 {  
            color: green;  
        }  
        .left{ 
            zoom: 1.2; 
        } 
    </style>  
</head>  
  
<body>  
    <center>  
        <h1>GeeksforGeeks</h1>  
          
        <h4>CSS | zoom property</h4>  
          
        <div>  
            <img class="left" src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
                alt="Sample image">  
  
            <img class="right" src=  
"https://media.geeksforgeeks.org/wp-content/uploads/20190808102629/geeks15.png"
                alt="Sample image">  
        </div>  
    </center>  
<body>  
  
</html> 