You are here: Reference > CSS > properties > zoom

zoom property

Browser support:
Specifies the zoom level of the element's content.
There isn't any similar property in Firefox and Opera. Only the size of text can be changed with the font-size property.
JavaScript page for this property: zoom. You can find other example(s) there.

Possible values:

 One of the following values: 
level (floating-point)
Floating-point number, the zoom level.
normal
Default. No magnification is applied. Same as 1.0.
zoom level in percentage
The zoom level is the specified percentage of the magnification scale. The 100% is the normal zoom level.
Default: normal.

Example HTML code 1:

This example illustrates the use of the zoom property:
<head>
    <style>
        .zoom50 {
            zoom: 50%;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
        }
        .zoom100 {
            zoom: 100%;
            background-color: #00F9F9;
            width: 80px;
            height: 80px;
        }
    </style>
</head>
<body>
    <div class="zoom50">zoom 50%</div>
    <div class="zoom100">zoom 100%</div>
</body>
Did you find this example helpful? yes no

Supported by tags:

Related pages:

External links:

User Contributed Comments

Post Content

Post Content