Skip to: content, navigation

zoom (CSS property)

Browser support full matrix
IE5.5+ FF2 Saf3 Op9.5
Full None None None
Spec
Inherited Initial Version
No normal CSSN/A

Example

In the following example, all images in the document have their magnification levels increased by 150%:

img {
  zoom: 150%;
}

Try it yourself!View all demos

Description

Internet Explorer for Windows versions 5.5 and above support the non-standard property zoom, which sets the magnification scale of an element. There’s no CSS3 equivalent to this property (as yet).

The zoom property isn’t inherited, but it will affect the children of the element to which it is applied, which will be magnified along with the parent. The content surrounding an element that has zoom applied will reflow to account for the resizing that will occur when zoom is set to a value other than normal.

One of the main uses for zoom has been to ensure that an element has a layout. It’s commonly used with a value of 1.0 (normal), so that no other changes are evident on the page. Refer to The Internet Explorer hasLayout Property for a longer discussion of the usage that the zoom property can be put to when debugging CSS issues in Internet Explorer.

Value

The value normal is the default, and produces no magnification.

Number values are specified as floating-point numbers that represent the magnification scale where 1.0 is equivalent to normal.

Percentage values represent a percentage of the magnification scale where 100% is equal to normal (note that decimals of percentages are ignored).

Compatibility

IE5.5Full
6.0Full
7.0Full
Firefox1.0None
1.5None
2.0None
Safari1.3None
2.0None
3.0None
Opera9.2None
9.5None

This property is a proprietary Microsoft extension to the CSS standard.

User-contributed notes

There are no comments yet.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters