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.
- 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.
- Google Chrome
- Internet Explorer
- Apple Safari
- CSS | font-size-adjust Property
- How to set the div height to auto-adjust to background size?
- How to adjust the width and height of iframe to fit with content in it ?
- CSS | zoom Property
- Zoom Functionality in ElectronJS
- How to zoom an element on Hover using CSS ?
- How to Zoom an Image on Mouse Hover using CSS ?
- How to zoom in on a point using scale and translate ?
- How to disable zoom on a mobile web page using CSS?
- Difference between System Level Exception and Application Level Exception in C#
- Domain Specific Tools
- How to determine if an array contains a specific value in PHP?
- How to get specific number of child elements using CSS?
- How to remove specific value from array using jQuery ?
- How to scroll to specific element using jQuery ?
- How to remove gutter space for a specific div in Bootstrap ?
- How to reload page after specific seconds in jQuery ?
- Removing occurrences of a specific character from end of a string in PHP
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.