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

    • 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. 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.

    • 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.

  5. fsy0718
    Permalink to comment#

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

  6. 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. 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.

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".