zoom Property (A, ABBR, ACRONYM, ...)

-ms-zoom Attribute \| zoom Property

-ms-zoom Attribute | zoom Property

Sets or retrieves the magnification scale of the object.

Syntax

HTML { -ms-zoom : vMagnification }
Scripting [ vMagnification = ] object.style.zoom

HTML	{ -ms-zoom : vMagnification }
Scripting	[ vMagnification = ] object.style.zoom

Possible Values

vMagnification Integer or String that specifies or receives one of the following 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.
The property is read/write for all objects except the following, for which it is read-only: currentStyle. The property has a default value of normal. The Microsoft Cascading Style Sheets (CSS) extension is not inherited.
DHTML expressions can be used in place of the preceding value(s). As of Internet Explorer 8, expressions are not supported in IE8 mode. For more information, see About Dynamic Properties.

Remarks

Internet Explorer 8. The -ms-zoom attribute is an extension to CSS, and can be be used as a synonym for zoom in IE8 mode.
Setting the value of the zoom property on a rendered object causes the content that surrounds the object to reflow.
Even though the zoom property is not inherited, it affects its children. This effect is similar to the transformation caused by the background and 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.

<html xmlns:control="">

<head>
<title>Zoom Demo</title>
<script type="text/javascript"> 
function zoomIn() {
  newZoom= parseInt(oZoom.style.zoom)+10+'%'
      oZoom.style.zoom =newZoom;
	  oCode.innerText='zoom: '+newZoom+'';	
  } 
function zoomOut() {
  newZoom= parseInt(oZoom.style.zoom)-10+'%'
      oZoom.style.zoom =newZoom;
	  oCode.innerText='zoom: '+newZoom+'';	
  } 
function changeZoom() {
  newZoom= parseInt(oSlider.value)
		oZoom.style.zoom=newZoom+'%';
		oCode.innerText='zoom: '+newZoom+'%';	
  } 
function changeZoom2(oSel) {
  newZoom= oSel.options[oSel.selectedIndex].innerText
		oZoom.style.zoom=newZoom;
		oCode.innerText='zoom: '+newZoom+'';	
  } 
</script>
</head>

<body onload="oZoom.style.zoom='100%'; 
    oCode.innerText='zoom: 100%'; ">

<!-- Slider and + and - controls  -->
<div style="position: absolute; top: 15px; left: 20px;">
    <form>
<control:slider id="oSlider" style="sl--orientation:vertical; 
    height:204px; width:28px; background-color:#336699; 
    padding-left:5px; border-left:1px solid #6699CC" tickinterval="10"   
    max="200" min="0" onchange="changeZoom()"> </control:slider>
    </form>
</div>
<div style="position: absolute; top: 15px; left: 48px; width: 28px; height: 200px; background-color: #336699;" align="center">
    <img src="/workshop/graphics/zoomscale.gif" alt="scale" border="0" usemap="#scaler">
</div>
<!-- The zoomable area container -->
<div style="position: absolute; top: 15px; left: 76px; width: 550px; height: 204px; background-color: black; vertical-align: middle; padding: 25px; font-family: arial; font-weight: bold; color: white; z-index: 3" align="center">
    <!-- The zoomable area -->
    <div id="oZoom" style="zoom: 100%" align="center">
        <h1>Welcome to Seattle!</h1>
        <img src="/workshop/graphics/seattlesmall.jpg" alt="Seattle skyline" align="left">
        <p align="center">A great city in the beautiful state of Washington.</p>
    </div>
</div>
<!-- Displayed code -->
<div style="overflow: hidden; border: 1px solid black; position: absolute; top: 219px; left: 20px; width: 606px; height: 90px; padding: 1px; padding-left: 25px; background-color: white; z-index: 3;">
    <span>&lt;div style=&quot;</span>
    <span style="font-weight: bold; font-family: verdana; color: red; font-size: 9pt" class="coder" id="oCode">
    </span><span>&quot;&gt;</span>
    <div>
        &lt;h1&gt; Welcome to seattle!&lt;/h1&gt;</div>
    <div>
        &lt;img src=&quot;seattlesmall.jpg&quot;&gt;</div>
    <div>
        &lt;p&gt;A great city in the beautiful state of Washington.&lt;/p&gt;</div>
    <div class="coder">
        &lt;/div&gt;</div>
</div>

<div id="oControls" style="position: absolute; top: 308px; left: 20px; width: 606px; height: 100px; background-color: gray; color: white; font-family: verdana; font-size: 11pt; font-weight: normal; padding: 10px; z-index: 3; text-align: center; border: 1px solid black; text-align: left;">
    <div style="padding-left: 65px">
        The code used to generate the image is shown in the area above. <br>
        <br>
        Modify the image using the selections below or the <br>
        slider control above and to the left of this window. </div>
    <hr>
    <div align="center">
        <select id="percent" onchange="changeZoom2(percent); ">
        <option selected="">Use Percentage Value</option>
        <option>10%</option>
        <option>25%</option>
        <option>50%</option>
        <option>75%</option>
        <option>100%</option>
        <option>150%</option>
        <option>200%</option>
        </select> <select id="normal" onchange="changeZoom2(normal); ">
        <option selected="">Use Number Value</option>
        <option>.1</option>
        <option>0.25</option>
        <option>0.5</option>
        <option>0.75</option>
        <option>1.0</option>
        <option>1.5</option>
        <option>2.0</option>
        </select><hr></div>
</div>
<map name="scaler">
<area shape="rect" coords="0,182,19,199" alt="plus" href="#" onclick="zoomIn()" style="cursor: hand">
<area shape="rect" coords="1,1,18,15" alt="minus" href="#" onclick="zoomOut()">
</map>

</body>

</html>

This feature requires Microsoft Internet Explorer 5.5 or later. Click the following icon to install the latest version. Then reload this page to view the sample.

Standards Information

This property is a Microsoft extension to Cascading Style Sheets (CSS) .

Applies To

A, ABBR, ACRONYM, ADDRESS, APPLET, B, BDO, BIG, BLOCKQUOTE, BODY, BUTTON, CAPTION, CENTER, CITE, CODE, COL, COLGROUP, currentStyle, CUSTOM, DD, DEL, DFN, DIR, DIV, DL, DT, EM, EMBED, FIELDSET, FONT, FORM, FRAME, FRAMESET, HEAD, hn, HR, I, IFRAME, IMG, INPUT, INPUT type=button, INPUT type=checkbox, INPUT type=file, INPUT type=hidden, INPUT type=image, INPUT type=password, INPUT type=radio, INPUT type=reset, INPUT type=submit, INPUT type=text, INS, ISINDEX, KBD, LABEL, LAYOUTRECT, LEGEND, LI, LISTING, MARQUEE, MENU, NOBR, NOFRAMES, NOSCRIPT, OBJECT, OL, OPTION, P, PLAINTEXT, PRE, Q, RT, RUBY, runtimeStyle, S, SAMP, SELECT, SMALL, SPAN, STRIKE, STRONG, style, SUB, SUP, TABLE, TBODY, TD, TEXTAREA, TFOOT, TH, THEAD, TR, TT, U, UL, VAR, XMP, CSSCurrentStyleDeclaration Constructor, CSSRuleStyleDeclaration Constructor, CSSStyleDeclaration Constructor