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

Leave a Comment

Current day month ye@r *

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