Export (0) Print
Expand All
21 out of 38 rated this helpful - Rate this topic

zoom property

Specifies the magnification scale of the object.

Internet Explorer 9

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

Applies ToAll elements
Mediavisual
Inheritedno
Initial Valuenormal

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.

An HTML element with the zoom property set to 100%

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.

An HTML element with the zoom property set to 0.75

See also

CSSStyleDeclaration
currentStyle
LayoutRect
runtimeStyle
style

 

 

Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.