Updated June 14, 2023
Introduction to CSS Zoom
The property in CSS is used to magnify the content’s size, whether it is plain text, images, graphical elements, etc. Magnifying may be for increasing the element’s size or decreasing the element’s size; it completely depends on user requirements. In earlier versions, there was no zoom attribute for zoom functionality; the user has written their logic to implement it. This predefined “zoom” attribute reduces a lot of code to write. In this topic, we are going to learn about CSS Zoom.
Real-Time Example: Let’s suppose some xyz company employees have near sight, so they can’t see small things, so they can’t see browser content if it is normal font size, so we have to zoom in the size. If some of them have far sight so they can’t see big things, so they can’t see browser content. We have to zoom out the size if it is a normal font size.
How does Zoom work in CSS?
CSS zoom works based on the attribute value provided to the zoom attribute. If we pass the zoom attribute value as normal, the size becomes 100%. If we pass the zoom attribute value as reset, it will reset back to the original size from user custom values like 120%, 70%, 150%, etc.
Syntax:
element
{
zoom:normal/reset/120%,70%/custom % values;
}Accepted Values with zoom attribute:
- normal: It does not change the normal size of the element. It is the default value.
- reset: It reset to the actual 100% size.
- custom % values: If you want explicitly provide custom values like 70%, 80%, 120%, 150%, etc., then use this percentage with the zoom attribute. If we give a percentage >100, then the content size increases; if we give a percentage <100, then the size of the content reduces.
Examples of CSS zoom
Here are the following examples:
Example #1 – Zoom-in
Code:
<!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
.p1
{
zoom: normal; /*100% or normal both are same*/
border: solid 2px green;
color: brown;
}
.p2
{
zoom:150%;/*zoom in means increasing content size with 150%*/
border: solid 2px green;
color: brown;
}
.p3
{
zoom:200%;/*zoom in means increasing content size with 200%*/
border: solid 2px green;
color: brown;
}
.p4
{
zoom:reset;/*reset means gives you the normal size of the content*/
border: solid 2px green;
color: brown;
}
h1
{
color: blue;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to zoom-in functionality</h1>
<p class="p1">The property in CSS is used to magnifying the size of the content whether it is plain text, images, graphical elements etc. Magnifying may be for increasing the size of the element or decreasing the size of the element, it is completed depends on user requirement. In earlier versions there is no zoom attribute for zoom functionality, user has write their own logic to implement zoom functionality. This predefined "zoom" attribute reduce lot of code to write.</p>
<p class="p2">Note: This "zoom" attribute may not allowed by all the browsers due to compatibility issue. Common supported browsers are Internet Explorer, Safari, and Chrome.</p>
<p class="p3">Real Time Example: Let suppose some xyz company employees some of them are having near sight so they can't see things which are small, so they can't see browser content if it is normal font size so we have to zoom in the size. If some of them are having far sight so they can't see things which are big, so they can't see browser content if it is normal font size so we have to zoom out the size.</p>
<p class="p4">Note: This "zoom" attribute may not allowed by all the browsers due to compatibility issue. Common supported browsers are Internet Explorer, Safari, and Chrome.</p>
</body>
</html>Output:
Example #2 – Zoom out
Code:
<!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
.p1
{
zoom: normal; /*100% or normal both are same*/
border: solid 2px navy;
color: red;
}
.p2
{
zoom:80%;/*zoom out means decreasing content size with 80%*/
border: solid 2px navy;
color: red;
}
.p3
{
zoom:60%;/*zoom out means decresing content size with 60%*/
border: solid 2px navy;
color: red;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to zoom-out functionality</h1>
<p class="p1">The property in CSS is used to magnifying the size of the content whether it is plain text, images, graphical elements etc. Magnifying may be for increasing the size of the element or decreasing the size of the element, it is completed depends on user requirement. In earlier versions there is no zoom attribute for zoom functionality, user has write their own logic to implement zoom functionality. This predefined "zoom" attribute reduce lot of code to write.</p>
<p class="p2">Note: This "zoom" attribute may not allowed by all the browsers due to compatibility issue. Common supported browsers are Internet Explorer, Safari, and Chrome.</p>
<p class="p3">Real Time Example: Let suppose some xyz company employees some of them are having near sight so they can't see things which are small, so they can't see browser content if it is normal font size so we have to zoom in the size. If some of them are having far sight so they can't see things which are big, so they can't see browser content if it is normal font size so we have to zoom out the size.</p>
</body>
</html>Output:
Example #3 – Zoom-in and zoom-out of images
Code:
<!DOCTYPE html>
<html>
<head>
<!--CSS Styles-->
<style>
.img1
{
zoom: 40%; /*zoom out with 40%*/
border: solid 2px navy;
color: red;
}
.img2
{
zoom:50%;/*zoom out with 50%*/
border: solid 2px navy;
color: red;
}
.img3
{
zoom:100%;/*zoom in with 100%*/
border: solid 2px navy;
color: red;
}
.img4
{
zoom:120%;/*zoom in with 120%*/
border: solid 2px navy;
color: red;
}
h1
{
color: green;
text-align: center;
}
</style>
</head>
<body>
<h1>Introduction to zoom-in and zoom-out functionality with images</h1>
<img src="d6.jpg" class="img1">
<img src="d6.jpg" class="img2">
<img src="d6.jpg" class="img3">
<img src="d6.jpg" class="img4">
</body>
</html>Output:
Conclusion
Zoom in CSS is used to magnify the content of the page. CSS zoom attributes allow normal, reset, and percentage values. More than 100% result in increasing the element size, less than 100% results in decreasing the element size, and if equal to 100% is the normal default size of the element.
Recommended Articles
We hope that this EDUCBA information on “CSS Zoom” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
