How to adjust CSS for specific zoom level?
In this article, we are going to learn how do we adjust the CSS for a specific zoom level. The CSS zoom property allows scaling of the content. This property is not recommended for production sites because it doesn’t support in some browsers.
Values:
- percentage: Scaling by percentage
- number: Scaling using percentage, e.g 1 = 100% and 1.5 = 150%
- normal: zoom: 1
Syntax: (The zoom here is set at 100%. Change it accordingly.)
<button onclick="sampleDiv.style.zoom='100%'">Zoom 100%</button>
Example: This example shows how to adjust CSS for specific zoom level.
<!DOCTYPE html><html> <head> <title> adjust CSS for specific zoom level </title></head> <body style="text-align:center"> <h2 style="color:green"> GeeksForGeeks </h2> <h2 style="color:purple"> adjust CSS for specific zoom level </h2> <div id="sampleDiv" style="width: 100px; background-color: green; "> <img src= alt="Trulli" width="250" height="250" align="middle" class="center"> </div> <button onclick="sampleDiv.style.zoom='100%'"> Zoom 100% </button> <button onclick="sampleDiv.style.zoom='50%'"> Zoom 50% </button> <button onclick="sampleDiv.style.zoom='200%'"> Zoom 200% </button></body> </html> |
Output:
Supported Browsers:
- Google Chrome
- Internet Explorer
- Apple Safari
- Opera
Please Login to comment...