In order to access this site you need to enable JavaScript!

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>