Skip to content
Related Articles

Related Articles

Improve Article

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
                alt="Sample image"
  
            <img class="right" src
                alt="Sample image"
        </div
    </center
<body
  
</html>

Output:

Supported Browsers: The browsers supported by CSS zoom property are listed below:

  • Google Chrome
  • Internet Explorer
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :