CSS | zoom Property
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
.png)
.png)
