Zoom | CSS-Tricks

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

vikram jyani

# February 21, 2012

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

Mandip Luitel

Permalink to comment# March 8, 2012

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…

Mandip Luitel

# March 8, 2012

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…

Vikas

# November 23, 2012

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.

Akhand

# January 7, 2013

how should i use zoom…?

Kristijan Korman

Permalink to comment# June 10, 2013

It’s simple, you should not :D
David

Permalink to comment# July 16, 2013

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# September 7, 2013

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

Permalink to comment# May 20, 2015
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.

fsy0718

# August 1, 2013

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

parmod bishnoi

Permalink to comment# August 21, 2015

1.5 == 150%;

Guruprasad Hegde

# September 25, 2013

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

piyush kothari

# May 21, 2014

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/

John

# June 14, 2014

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.

Imran Bajerai

# August 18, 2014

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

Michał

# March 2, 2015

Images in demo has disappeared.

Michal

# June 11, 2015

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.

Kumar

# June 25, 2015

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

parmod bishnoi

# August 21, 2015

.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);
}

parmod bishnoi

# August 21, 2015

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

shakir

# September 14, 2015

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

Ashfaq

Permalink to comment# September 14, 2016

You need to use transform scale for firefox support, You can try like that
-moz-transform: scale(1.3);
Here is an article I found with detail explanation http://codeconvey.com/css-zoom-effect-using-scale-and-transition/

fassl

# October 2, 2015

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

vinay

# February 4, 2016

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

joanne

# April 9, 2016

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

Vinay Singh

# April 22, 2016

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

Udayan Basak

# May 13, 2016

This is not working…… :(

MuZZ

# September 29, 2016

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

PAULA TEJANDO

# November 24, 2016

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

bamby

# January 2, 2017

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.

mubeen

# July 10, 2017

is this enable on the multitouch screen???

Andrew

# November 21, 2017

‘zoom’ is a factor that applies to font sizes, image sizes, and the content in general, whilst preserving the actual width of the content, and letting text wrap and drop down. For instance, it simulates zooming in on the page (ctrl +).

‘transform’ applies an arbitrary affine transform to the element exclusively for when rendering it; thus the parent element sees it as the same size. And, when upscaling it, it does NOT stay the same width or cause text to wrap, but passes its parent element’s bounds.

red

# December 3, 2019

Any reason why should zoom not be used in production other that it is not standard? I don’t see how transform can do what zoom does. What are possible consequences using zoom in production?

Rajilesh Panoli

# June 17, 2020

samething can achieve using this for other browers
transform: scale(0.34);
margin: -12px -6px -6px -20px;

Erik

# January 8, 2021

Hi!

Reading all this and searching for a way to getting to fit my page width:1280 into a mobile android browser width:360 and height:640.

I thought about putting the index.htm into an iframe width:100% (also in table?) and call the iframe 360.htm and forward every browser resolution lower width:361 to 360.htm

Also hopes an iframe can be zoomed and transition to be turned 90degr (or force landscape mode) and call the iframe 640.htm

That beiing said: I am gonna do some experimental fixes and tricks to break mobile browser rules, lol

Other Resources

Browser Support

Comments

Leave a Reply Cancel reply