Open In App
Related Articles

CSS | zoom Property

Improve Article
Save Article
Like Article

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.


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> 
        CSS | zoom property 
        h1 { 
            color: green; 
            zoom: 1.2;
        <h4>CSS | zoom property</h4
            <img class="left" src
                alt="Sample image"
            <img class="right" src
                alt="Sample image"


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

  • Google Chrome
  • Internet Explorer
  • Safari

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 19 May, 2020
Like Article
Save Article
Similar Reads
Complete Tutorials