How to adjust CSS for specific zoom level?

Last Updated : 02 Jul, 2019

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= 
"https://media.geeksforgeeks.org/wp-content/uploads/20190506164011/logo3.png" 
             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> 