diff options
Diffstat (limited to 'files/it/web/css/object-fit')
| -rw-r--r-- | files/it/web/css/object-fit/index.html | 161 |
1 files changed, 161 insertions, 0 deletions
diff --git a/files/it/web/css/object-fit/index.html b/files/it/web/css/object-fit/index.html new file mode 100644 index 0000000000..1421cd58c8 --- /dev/null +++ b/files/it/web/css/object-fit/index.html @@ -0,0 +1,161 @@ +--- +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> + +<pre class="syntaxbox notranslate">{{csssyntax}}</pre> + +<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> |