CSS Zoom
This CSS property scales the content. It manages the magnification level of the content. Instead of using the CSS Zoom property, we can also use the transform: scale(); property.
Properties:
- normal : It holds the normal content that does not zoom-out or zoom-in. It has the value zoom: 1.
- number: The positive float value that indicates a zoom factor.
- percentage: Its 100% value is equivalent to normal.
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS zoom
</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<center>
<h1>CSS zoom property</h1>
<div>
<h2>original image</h2>
<img class="original" src= "good-morning.jpg">
</div>
</center>
<body>
</html>
OUTPUT:
Example:
<!DOCTYPE html>
<html>
<head>
<title>
CSS zoom
</title>
<style>
h1 {
color: red;
}
.magnify{
width: 100px;
height: 100px;
border-radius: 30px;
display: inline-block;
color: white;
}
#m1 {
background-color: blue;
zoom: normal;
}
#m2 {
background-color: yellow;
zoom: 200%;
color: black;
}
#m3 {
background-color: green;
zoom: 2.9;
}
p{
padding-top:20px;
}
</style>
</head>
<body>
<center>
<h1>CSS 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:
