diff options
Diffstat (limited to 'files/fa/web/css/بزرگنمایی/index.html')
| -rw-r--r-- | files/fa/web/css/بزرگنمایی/index.html | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/files/fa/web/css/بزرگنمایی/index.html b/files/fa/web/css/بزرگنمایی/index.html new file mode 100644 index 0000000000..e664b6b4cc --- /dev/null +++ b/files/fa/web/css/بزرگنمایی/index.html @@ -0,0 +1,134 @@ +--- +title: بزرگنمایی +slug: Web/CSS/بزرگنمایی +translation_of: Web/CSS/zoom +--- +<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> + +<pre class="syntaxbox">{{csssyntax}}</pre> + +<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> |