zoom (CSS property)

Spec
Inherited Initial Version
No normal CSSN/A
Browser support (more…)
IE5.5+ FF3.5 SA4 OP10 CH2
Full None None None None

Syntax

zoom: { number | percentage | normal } ;

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.

Example

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

img {
  zoom: 150%;
}

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full None None None None None None None None None None None None None

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

User-contributed notes

ID:
#1
Contributed:
by Paul O'B
Date:
Tue, 05 Oct 2010 19:52:48 GMT

Latest webkit (Safari and chrome)versions seem to support zoom now

Related Products