Understand CSS Zoom Property with Real World Example

Last updated on: by Digamber

CSS Zoom

CSS Zoom property is what you use if you wish to scale your content. CSS Zoom is not standard. In the earlier days, CSS Zoom was present only in Internet Explorer.

If we are talking about production websites, then CSS Zoom is not recommended at all even though many browsers have warmed up to CSS Zoom.

.class {
  zoom: 150%;

Let’s have a closer look at the supported values below:

Lets Checkout The CSS Zoom Syntax

normalWe use this to render the element in its regular size.
resetDo not magnify or demagnify the element in case the user goes for zooming which is non-pinch-based. Keyboard shortcuts can be cited as examples here. The only -WebKit- supports this syntax.
percentageWe are referring to zoom factor here. For standard size you set it to 100%. For zoom CSS in you go for values higher than 100 and values lower than 100% for zoom out.
numberAgain, we are talking about zoom factor here. 1.0 equals to 100%, which is the average value. You can zoom in or zoom out by increasing or decreasing the value.

If your browser supports it, checkout the different sizes of a square created using CSS ZOOM property.

See the Pen
CSS 3 Zoom Real World Example
by Digamber (@singhdigamber)
on CodePen.

One thing you need to understand is that zoom is an old IE concept. You should not apply this on the live sites. If you wish to scale the elements in your website, then you can turn to CSS Transformations. However, if you need oldIE support, then you may use filters.

The role of zoom was primarily a hack back in the day, especially during IE6. We used to rely on zoom to fix the rendering bugs associated with IE7 and IE6. For instance, display: inline-block wasn’t very helpful in the case of IE7 and IE6. However, the problem was solved the moment we set zoom: 1. The way IE rendered its layout was the primary reason behind this bug. When we went for the simple fix zoom: 1 is an internal property named hasLayout, which solved everything.

CSS Zoom Browser Support

Starting from version 4, Safari has supported zoom. But it comes with a new value: reset. When you apply reset, you will not be able to zoom your element via keyboard shortcuts.

ChromeFirefoxSafariIE EdgeOperaAndroid Webview
AnyNone4.0+1215 +Yes

Browser compatibility source caniuse.com


I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.