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
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