blob: c2a14b9bbf746d857d574ad443e19b50279315d3 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
|
---
title: بزرگنمایی
slug: Web/CSS/zoom
translation_of: Web/CSS/zoom
original_slug: Web/CSS/بزرگنمایی
---
<div>{{CSSRef}}{{Non-standard_header}}</div>
<p><span class="seoSummary">The non-standard <strong><dfn><code>zoom</code></dfn></strong> <a href="/en-US/docs/Web/CSS">CSS</a> property can be used to control the magnification level of an element.</span> {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, <code>zoom</code> affects the layout size of the element.</p>
<pre class="brush: css no-line-numbers">/* Keyword values */
zoom: normal;
zoom: reset;
/* <percentage> values */
zoom: 50%;
zoom: 200%;
/* <number> values */
zoom: 1.1;
zoom: 0.7;
/* Global values */
zoom: inherit;
zoom: initial;
zoom: unset;</pre>
<p>{{cssinfo}}</p>
<h2 id="Syntax">Syntax</h2>
<h3 id="Values">Values</h3>
<dl>
<dt><code>normal</code></dt>
<dd>Render this element at its normal size.</dd>
<dt><code>reset</code> {{non-standard_inline}}</dt>
<dd>Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing <kbd>Ctrl</kbd>-<kbd>-</kbd> or <kbd>Ctrl</kbd>+<kbd>+</kbd> keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).</dd>
<dt>{{cssxref("<percentage>")}}</dt>
<dd>Zoom factor. <code>100%</code> is equivalent to <code>normal</code>. Values larger than <code>100%</code> zoom in. Values smaller than <code>100%</code> zoom out.</dd>
<dt>{{cssxref("<number>")}}</dt>
<dd>Zoom factor. Equivalent to the corresponding percentage (<code>1.0</code> = <code>100%</code> = <code>normal</code>). Values larger than <code>1.0</code> zoom in. Values smaller than <code>1.0</code> zoom out.</dd>
</dl>
<h3 id="Formal_syntax">Formal syntax</h3>
{{csssyntax}}
<h2 id="Examples">Examples</h2>
<h3 id="First_example">First example</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><p class="small">Small</p>
<p class="normal">Normal</p>
<p class="big">Big</p></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">p.small {
zoom: 75%;
}
p.normal {
zoom: normal;
}
p.big {
zoom: 2.5;
}
p {
display: inline-block;
}
p:hover {
zoom: reset;
}
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample('First_example')}}</p>
<h3 id="Second_example">Second example</h3>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div id="a" class="circle"></div>
<div id="b" class="circle"></div>
<div id="c" class="circle"></div></pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">div.circle {
width: 25px;
height: 25px;
border-radius: 100%;
text-align: center;
vertical-align: middle;
display: inline-block;
zoom: 1.5;
}
div#a {
background-color: gold;
zoom: normal;
}
div#b {
background-color: green;
zoom: 200%;
}
div#c {
background-color: blue;
zoom: 2.9;
}
</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample('Second_example')}}</p>
<h2 id="Specifications">Specifications</h2>
<p>This property is nonstandard and originated in Internet Explorer. Apple has <a href="https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html#//apple_ref/doc/uid/TP30001266-SW15">a description in the Safari CSS Reference</a>. Rossen Atanassov of Microsoft has <a href="http://cdn.rawgit.com/atanassov/css-zoom/master/Overview.html">an unofficial draft specification proposal on GitHub</a>.</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<p>{{Compat("css.properties.zoom")}}</p>
<h2 id="See_also">See also</h2>
<ul>
<li><a href="https://css-tricks.com/almanac/properties/z/zoom/"><code>zoom</code> entry in CSS-Tricks' CSS Almanac</a></li>
<li>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/zoom"><code>zoom</code> viewport descriptor</a>, for use with <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport"><code>@viewport</code></a></li>
<li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=390936">Bug 390936: Implement Internet Explorer <code>zoom</code> property for CSS </a>on the Firefox issue tracker Bugzilla</li>
</ul>
|
