Treehouse: Grow your CSS skills. Land your dream job.

zoom

Last updated on:

The zoom property in CSS allows you to scale your content. It is non-standard, and was originally implemented only in Internet Explorer. Although several other browsers now support zoom, it isn't recommended for production sites.

.zoom {
  zoom: 150%;
}

The "supported: values are:

  • percentage - Scale by this percentage
  • number - Convert to percentage and scale - 1 == 100%; 1.5 == 150%;
  • normal - zoom: 1;

If your browser supports it, you'll see these images as different sizes:

Check out this Pen!

Zoom is an old IE thing. It isn't something you should use on live sites. If you want to scale content, use CSS Transforms. You can also use filters if you need oldIE support.

Back in the days of IE6, zoom was used primarily as a hack. Many of the rendering bugs in both IE6 and IE7 could be fixed using zoom. As an example, display: inline-block didn't work very well in IE6/7. Setting zoom: 1 fixed the problem. The bug had to do with how IE rendered its layout. Setting zoom: 1 turned on an internal property called hasLayout, which fixed the problem.

Other Resources

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any 4.0+ None None 5.5+ TBD TBD

Safari also supports zoom since version 4. However, it added a new value: reset. That tells the browser not to zoom your element on zoom. So your cmd/ctrl+? It doesn't work on elements with zoom: reset applied.

Comments

  1. vikram jyani
    Permalink to comment#

    how should i put a image on a moving banner which is made by jquery through css

    • Mandip Luitel
      Permalink to comment#

      Well actually Vikram its a wrong place to ask this question you can ask it on forum :) but well regarding your solution, its good to use positioning to the div and drop it over the image, give image a z-index value less then the z-index value of div and the div will be shown on the top of the moving banner :)

      I hope this will help you.

      if not email me the files i will code it for you :)

      cheers…

  2. Mandip Luitel
    Permalink to comment#

    Ah sorry i meant vise-verse with the z-index :)
    Give z-index value higher in image then the div

    i.e.
    .img {z-index:1000}
    #div {z-index:10}

    Cheers…

  3. Vikas
    Permalink to comment#

    hi i am facing the problem with iframe. i include one iframe in a div and div width is fixed, like below

    in that case my iframe is not fit in my div its cut from right side and i dont want use scroll.

  4. Akhand
    Permalink to comment#

    how should i use zoom…?

    • Kristijan Korman
      Permalink to comment#

      It’s simple, you should not :D

    • David
      Permalink to comment#

      True. If I quote the article:

      It isn’t something you should use on live sites.

      Plus, seeing as Firefox & Opera have no support for it at all, and any use of zoom would be quite layout-critical or display-critical, it’s certainly not a good idea to use it at all.

    • Dan
      Permalink to comment#

      I’ve found zoom comes in handy when you want to have a feature of imitating the page zoom in and out like when you hit command/control-minus and command/control-equal. You can put it on the html element and control it through JavaScript. As far as I can tell, there’s no way to do that through transforms. It has to be a progressive enhancement sort of thing though, as it only works on webkit/blink browsers ( Safari, Chrome, Opera, Maxthon). It does not work on IE or Firefox.

    • Phil

      Best not to use it because Browsers like Firefox and Opera are pretty popular and you don’t want your page breaking. That being said, however, I use it (sparingly) when converting websites to mobile. Specifically when dealing with elements who’s background-images are sprites. It’s honestly being lazy, but it’s a quick solution. Why would it be okay in mobile? Because the two most popular browsers on mobile support it (Chrome and Safari). But again, if you can do just avoid using it. Use it in the lower scale section where you know that the screen is mobile size only something like @media

      (max-size: 380px){
         #my_button_with_sprites{
              zoom: 0.8;
         }
      }
      

      But anyway, that’s what I would do.

  5. fsy0718
    Permalink to comment#

    the chrome(27.0), opera(15.0) has supported zoom: reset

  6. Guruprasad Hegde
    Permalink to comment#

    Some of websites will not fit in to CRT screen[design breaks] where as it fits on LCD/Laptop screen. Any idea to fix this problem. Resolution is proper..and if I zoom -ve on CRT it displays some what ok..

  7. piyush kothari

    I am facing a different issue with zoom in ie
    I am using jquery animations on page and i need to have a min height and width of page so content doesn’t overlap with the header above, so for screen with smaller resolution (less than 1150 wide) i have set zoom to .075 on the div containing animation.

    This works perfectly in other browsers, but in IE content is squeezed to take 75% of screen space, but in other browser content takes the full screen width but area is increased to 125%.

    do you have any suggestion on how to fix it?

    http://www.xirrus.com/

  8. John
    Permalink to comment#

    Is there anyone who is willing to guide me personally in using this theme when i purchase it. I am willing to pay for the service if it is affordable.

  9. Imran Bajerai
    Permalink to comment#

    Your images are broken, the services has an issue delivering images.

  10. Michał
    Permalink to comment#

    Images in demo has disappeared.

  11. Michal
    Permalink to comment#

    I don’t agree that zoom shoudn’t be used on a live webpages. It should be used but with transform: scale fallback. Why? Beacuse in WebKit engine zoom property scale content like vector image and transform: scale works like on raster image which looks very ugly when we scale up content.

    So we should use zoom for WebKit and Trident and tranform: scale for rest.

  12. Kumar
    Permalink to comment#

    Can someone help me with centering a web page on different size monitors and different web browsers? If I zoom the browser to 110%, it looks perfect on a 24 inch monitor and if zoomed to 90%, it looks perfect on a 19 inch monitor. Can this be included in the css code? Thanks in advance

  13. parmod bishnoi
    Permalink to comment#

    .effect:hover img {
    transition: all 0.4s ease-in-out 0s;
    opacity: 0.7;
    -moz-transform: scale(1,2);
    -webkit-transform: scale(50%,50%);
    -o-transform: scale(2,2);
    -ms-transform: scale(2,2);
    transform: scale(2,2);
    }

  14. parmod bishnoi
    Permalink to comment#

    Scale by this percentage
    number –
    1.0 == 100%;
    1.5 == 150%;
    by default normal – zoom: 1;

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```