CSS Zoom

This CSS property scales the content. It manages the magnification level of the content. Instead of using this property, we can also use the transform: scale(); property.

The use of this CSS property is not recommended because it is not supported in some browsers. It is a non-standard feature, which is recommended not to use on production sites. It was initially implemented in the IE browser.

Syntax

This property supports the values mentioned above are discussed as follows.

normal: It shows the element to its normal size. It defines the normal size of the element. Tt holds the normal content that does not zoom-out or zoom-in. It has the value zoom: 1;

number: It is a positive float value that indicates a zoom factor. Its value smaller than 1.0 represents zoom out (or size reduction), and larger than 1.0 represents zoom in (increase the size). Suppose we specify zoom: 1.5; then, the content will be 1.5 times larger than the original content.

percentage: It defines a value in percentage. Its 100% value is equivalent to normal. It scales the content using the percentage value. Its value greater than 100% represents zoom in, and value less than 100% represents zoom out. Suppose if we define zoom: 175%; then it means that the content will be 175% larger than the original content.

We can understand this property by using some illustrations, which are given below.

Example1

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        CSS zoom 
    </title>  
  
    <style>  
        h1 {  
            color: red;			
        }  
		h2{
		color: blue;
		}
        .magnify1{ 
            zoom: 0.75; 
        } 
        .magnify{ 
            zoom: 1.5; 
        } 
		
    </style>  
</head>  
  
<body>  
    <center>           
        <h1>CSS zoom property</h1>            
        <div>  
		<h2>original image</h2>
            <img class="original" src= "jtp.png">  
  		<h2>Magnified image zoom: 0.75;</h2>
            <img class="magnify1" src= "jtp.png">  			
  		<h2>Magnified image zoom: 1.5;</h2>
            <img class="magnify" src= "jtp.png">  
        </div>  
    </center>  
<body>  
  
</html>

Test it Now

Example2

<!DOCTYPE html>  
<html>  
  
<head>  
    <title>  
        CSS zoom 
    </title>  
  
    <style>  
        h1 {  
            color: red;			
        }  
.magnify{
  width: 100px;
  height: 100px;
  border-radius: 30px;
  display: inline-block;
  color: white;
}
#m1 {
  background-color: blue;
  zoom: normal;
}
#m2 {
  background-color: yellow;
  zoom: 200%;
  color: black;
}
#m3 {
  background-color: green;
  zoom: 2.9;
}		
p{
padding-top:20px;
}
    </style>  
</head>  
  
<body>  
    <center>           
        <h1>CSS zoom property</h1>            
<div id="m1" class="magnify"><p>zoom: normal;<p></div>
<div id="m2" class="magnify"><p>zoom: 200%;<p></div>
<div id="m3" class="magnify"><p>zoom: 2.9;<p></div>    
</center>  
<body>  
  
</html>

Test it Now

Next TopicCSS order

← prev next →