CSS Zoom
CSS Zoom: Zoom property in CSS extents the content. This property controls the content’s level of magnification. Rather than the use of this CSS property, we may also apply the CSS property, i.e., transform: scale();.
The usage of the zoom property is not suggested because this property does not provide its support in a few browsers. The zoom CSS property is not a standard aspect, which is advised not to apply over production sites. Initially, it was implemented inside the IE browser.
Syntax:
zoom: normal | number | percentage | reset ;
Zoom property in CSS provides its support for the values as above-mentioned, which are explained below.
normal: It displays the component to its size as normal. It specifies the general size of any component. It takes the general contents that do not zoom-in or zoom-out. It has value, i.e., zoom:1;
number: This property defines any positive value and illustrates any zoom factor. It contains values which are larger than value 1.0 depict zoom in (size increment), and smaller than value 1.0 depict zoom out (size reduction). Suppose we describe zoom: 1.5; after that, any content will 1.5 times greater than any original content.
percentage: It displays the values in percentage. In this, a 100% value is equal to its normal value. It extents any content with the use of any percentage value. It contains values that are larger than 100% depict zoom in (size increment), and smaller than 100% depict zoom out (size reduction). Suppose we describe zoom: 175%; after that, any content will 175% times greater than any original content.
Let’s understand this CSS property with the help of the following examples, which are discussed below.
Example1:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Zoom
</title>
<style>
h1
{
color: green;
}
h2
{
color: lime;
}
magnify1
{
zoom: 0.75;
}
magnify
{
zoom: 1.5;
}
</style>
</head>
<body>
<center>
<h1> Zoom Property </h1>
<div>
<h2> Original Image </h2>
<img class= "original" src= "Flower1.jpg">
<h2> Magnified image zoom: 0.75; </h2>
<img class= "magnify1" src= "Flower1.jpg">
<h2> Magnified image zoom: 1.5; </h2>
<img class= "magnify" src= "Flower1.jpg">
</div>
</center>
</body>
</html>
Output:
Example2:
<!DOCTYPE html>
<html>
<head>
<title>
CSS Zoom
</title>
<style>
h1
{
color: green;
}
.magnify
{
width: 100px;
height: 100px;
border-radius: 30px;
display: inline-block;
color: white;
}
#m1
{
background-color: yellow;
zoom: normal;
color: black;
}
#m2
{
background-color: blue;
zoom: 200%;
}
#m3
{
background-color: lime;
zoom: 2.9
}
p
{
padding-top: 20px;
}
</style>
</head>
<body>
<center>
<h1> 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>
Output:
