zoom property

Specifies the magnification scale of the object.

Syntax

zoom: normal | number | percentage

Property values

normal

Default. Magnification scale is normal. The object renders normal size.

number

Floating-point number that specifies the magnification scale, where 1.0 is normal.

percentage

Integer, followed by a %. The value is a percentage of the magnification scale, where 100% is normal.

CSS information

Standards information

There are no standards that apply here.

Remarks

Windows Internet Explorer 8. The -ms-zoom attribute is an extension to CSS, and can be used as a synonym for zoom in IE8 Standards mode.

Setting the value of the -ms-zoom property on a rendered object causes the content that surrounds the object to reflow.

Even though the -ms-zoom property is not inherited, it affects its children. This effect is similar to the transformation caused by the background and -ms-filter properties.

Examples

The following examples use the zoom attribute and the zoom property to change the magnification scale of a p element.

This example uses a style rule in an embedded style sheet to set the zoom attribute to one-tenth of normal.

<style>
  .clsTeenyWeeny  { zoom: 0.10 }
</style>

This example uses inline scripting to set the zoom property to 200% when an onmouseover event occurs. The magnification scale returns to normal when the onmouseout event occurs.

<p onmouseover="this.style.zoom='200%'" 
   onmouseout="this.style.zoom='normal'">

This example provides controls that let the user adjust the zoom property.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/refs/zoom.htm

In the HTML snippet below, the zoom property is set to 100%.

<div style="zoom: 100%">
   <h1>Welcome to Seattle!</h1>
   <img src="seattlesmall.jpg">
   <p>A great city in the beautiful state of Washington.</p>
</div>

The image below shows the result.

In this HTML snippet below, the zoom property has been changed to 0.75.

<div style="zoom: 0.75">
   <h1>Welcome to Seattle!</h1>
   <img src="seattlesmall.jpg">
   <p>A great city in the beautiful state of Washington.</p>
</div>

The image below shows the result.

See also

CSSStyleDeclaration

currentStyle

LayoutRect

runtimeStyle

style