zoom

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. User Avatar
    vikram jyani
    Permalink to comment#

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

    • User Avatar
      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. User Avatar
    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. User Avatar
    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. User Avatar
    Akhand
    Permalink to comment#

    how should i use zoom…?

    • User Avatar
      Kristijan Korman
      Permalink to comment#

      It’s simple, you should not :D

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

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

    • User Avatar
      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. User Avatar
    fsy0718
    Permalink to comment#

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

  6. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    Imran Bajerai
    Permalink to comment#

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

  10. User Avatar
    Michał
    Permalink to comment#

    Images in demo has disappeared.

  11. User Avatar
    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. User Avatar
    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. User Avatar
    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. User Avatar
    parmod bishnoi
    Permalink to comment#

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

  15. User Avatar
    shakir
    Permalink to comment#

    can anyone tell me zoom option for firefox…..PLZ

  16. User Avatar
    fassl
    Permalink to comment#

    Is it possible to reset “zoom: reset”. Like i want the parent element to not zoom but children elements to zoom?

  17. User Avatar
    vinay
    Permalink to comment#

    How to make threeline menu from scratch,
    and that menu shold be responsive and changing according to browser resize responsivness

  18. User Avatar
    joanne
    Permalink to comment#

    Hi! is it possible to post form to email??

  19. User Avatar
    Vinay Singh
    Permalink to comment#

    ” zoom : reset; ” is not working for IE.
    Is there any equivalent for that.

  20. User Avatar
    Udayan Basak

    This is not working…… :(

  21. User Avatar
    MuZZ
    Permalink to comment#

    I just want make Hoverable Image. please help me..

  22. User Avatar
    PAULA TEJANDO
    Permalink to comment#

    i tried this shit, i tried so fucking hard, i didn’t got far, but doesn’t matter .

  23. User Avatar
    bamby
    Permalink to comment#

    Zoom is the best way sometimes to zoom the page. Unfortunately isn’t css standard, but I hope it will be.
    transform: scale() behaves tooooooo differently: for example if you want to zoom the whole page it creates more margins around. Zoom instead zooms each thing the right way like the browser ctrl + wheel behavior: I think that they are complementary and sometime is needed one other times is needed the other. Hope future css implementations will allow to use both, each one with its own behavior.

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag