Skip to content
Related Articles

Related Articles

Improve Article

How to adjust CSS for specific zoom level?

  • Difficulty Level : Expert
  • 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=
             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



My Personal Notes arrow_drop_up
Recommended Articles
Page :