Skip to content
Related Articles
Open in App
Not now

Related Articles

How to adjust CSS for specific zoom level?

Improve Article
Save Article
  • Difficulty Level : Expert
  • Last Updated : 02 Jul, 2019
Improve Article
Save Article

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="'100%'">Zoom 100%</button>

Example: This example shows how to adjust CSS for specific zoom level.

<!DOCTYPE html>
        adjust CSS for specific zoom level
<body style="text-align:center">
    <h2 style="color:green">
    <h2 style="color:purple">
      adjust CSS for specific zoom level
    <div id="sampleDiv" style="width: 100px; background-color: green; ">
        <img src=
    <button onclick="'100%'">
      Zoom 100%
    <button onclick="'50%'">
      Zoom 50%
    <button onclick="'200%'">
      Zoom 200%


Supported Browsers:

  • Google Chrome
  • Internet Explorer
  • Apple Safari
  • Opera

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!