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:

<img src="http://placekitten.com/100/100">
<img src="http://placekitten.com/100/100">
<img src="http://placekitten.com/100/100">
<img src="http://placekitten.com/100/100">

img:nth-child(2) {
  zoom: 150%;
}
img:nth-child(3) {
  zoom: 1.8;
}
img:nth-child(4) {
  zoom: 0.2;
}

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.

Browser Support

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 withzoom: reset applied.