diff options
author | Ryan Johnson <rjohnson@mozilla.com> | 2021-04-29 16:16:42 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-29 16:16:42 -0700 |
commit | 95aca4b4d8fa62815d4bd412fff1a364f842814a (patch) | |
tree | 5e57661720fe9058d5c7db637e764800b50f9060 /files/it/web/css/object-fit/index.html | |
parent | ee3b1c87e3c8e72ca130943eed260ad642246581 (diff) | |
download | translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2 translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip |
remove retired locales (#699)
Diffstat (limited to 'files/it/web/css/object-fit/index.html')
-rw-r--r-- | files/it/web/css/object-fit/index.html | 161 |
1 files changed, 0 insertions, 161 deletions
diff --git a/files/it/web/css/object-fit/index.html b/files/it/web/css/object-fit/index.html deleted file mode 100644 index 10aec7f358..0000000000 --- a/files/it/web/css/object-fit/index.html +++ /dev/null @@ -1,161 +0,0 @@ ---- -title: object-fit -slug: Web/CSS/object-fit -translation_of: Web/CSS/object-fit ---- -<div>{{CSSRef}}</div> - -<p>La proprietà <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>object-fit</code></strong> istruisce il browser su come deve ridimensionare il contenuto di un <a href="/en-US/docs/Web/CSS/Replaced_element">elemento incluso</a>, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.</p> - -<p>Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.</p> - -<div>{{EmbedInteractiveExample("pages/css/object-fit.html")}}</div> - - - -<h2 id="Syntax" name="Syntax">Sintassi</h2> - -<p>La proprietà <code>object-fit</code> viene specificata usando uno dei seguenti valori.</p> - -<h3 id="Values" name="Values">Valori</h3> - -<dl> - <dt><code>contain</code></dt> - <dd>L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento e il suo contenitore non sono identici si avrà come risultato l'effetto <a href="https://en.wikipedia.org/wiki/Letterboxing_(filming)">"letterboxed"</a>.</dd> - <dt><code>cover</code></dt> - <dd>L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. <span class="tlid-translation translation" lang="it"><span title="">Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi</span></span>.</dd> - <dt><code>fill</code></dt> - <dd><span class="tlid-translation translation" lang="it"><span title="">L'elemento viene ridimensionato per riempire completamente il suo contenitore.</span> <span title="">Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.</span></span></dd> - <dt><code>none</code></dt> - <dd>L'elemento non viene ridimensionato.</dd> - <dt><code>scale-down</code></dt> - <dd>L'elemento viene ridimensionto come se <code>none</code> o <code>contain</code> fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.</dd> -</dl> - -<h3 id="Formal_syntax">Formal syntax</h3> - -{{csssyntax}} - -<h2 id="Example" name="Example">Esempi</h2> - -<h3 id="HTML">HTML</h3> - -<pre class="brush: html notranslate"><div> - <h2>object-fit: fill</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill"/> - - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="fill narrow"/> - - <h2>object-fit: contain</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain"/> - - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="contain narrow"/> - - <h2>object-fit: cover</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover"/> - - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="cover narrow"/> - - <h2>object-fit: none</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none"/> - - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="none narrow"/> - - <h2>object-fit: scale-down</h2> - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down"/> - - <img src="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" alt="MDN Logo" class="scale-down narrow"/> - -</div></pre> - -<h3 id="CSS">CSS</h3> - -<pre class="brush: css notranslate">h2 { - font-family: Courier New, monospace; - font-size: 1em; - margin: 1em 0 0.3em; -} - -div { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-items: flex-start; - height: 940px; -} - -img { - width: 150px; - height: 100px; - border: 1px solid #000; -} - -.narrow { - width: 100px; - height: 150px; - margin-top: 10px; -} - -.fill { - object-fit: fill; -} - -.contain { - object-fit: contain; -} - -.cover { - object-fit: cover; -} - -.none { - object-fit: none; -} - -.scale-down { - object-fit: scale-down; -} -</pre> - -<h3 id="Risultato">Risultato</h3> - -<p>{{ EmbedLiveSample('Example', 500, 450) }}</p> - -<h2 id="Specifications" name="Specifications">Specifiche</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specifica</th> - <th scope="col">Stato</th> - <th scope="col">Commento</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}}</td> - <td>{{Spec2('CSS4 Images')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}}</td> - <td>{{Spec2('CSS3 Images')}}</td> - <td>Initial definition</td> - </tr> - </tbody> -</table> - -<p>{{cssinfo}}</p> - -<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilità browser</h2> - - - -<p>{{Compat("css.properties.object-fit")}}</p> - -<h2 id="See_also" name="See_also">Guarda anche</h2> - -<ul> - <li>Altre proprietà CSS relative alle immaggini: {{cssxref("object-position")}}, {{cssxref("image-orientation")}}, {{cssxref("image-rendering")}}, {{cssxref("image-resolution")}}.</li> - <li>{{cssxref("background-size")}}</li> -</ul> |