--- title: object-fit slug: Web/CSS/object-fit translation_of: Web/CSS/object-fit ---
{{CSSRef}}

La proprietà CSS object-fit istruisce il browser su come deve ridimensionare il contenuto di un elemento incluso, come avviene per i tag {{HTMLElement("img")}} o {{HTMLElement("video")}}, per adattarlo al suo contenitore.

Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà {{cssxref("object-position")}}.

{{EmbedInteractiveExample("pages/css/object-fit.html")}}

Sintassi

La proprietà object-fit viene specificata usando uno dei seguenti valori.

Valori

contain
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 "letterboxed".
cover
L'elemento viene ridimensionato in relazione al suo contenitore preservando le proporzioni. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà ritagliato per adattarsi.
fill
L'elemento viene ridimensionato per riempire completamente il suo contenitore. Se le proporzioni dell'elemento non corrispondono alle proporzioni del suo contenitore, l'oggetto verrà deformato per adattarsi.
none
L'elemento non viene ridimensionato.
scale-down
L'elemento viene ridimensionto come se none o contain fossero specificati, ma con la differenza che si ottiene sempre un oggetto più piccolo.

Formal syntax

{{csssyntax}}

Esempi

HTML

<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>

CSS

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;
}

Risultato

{{ EmbedLiveSample('Example', 500, 450) }}

Specifiche

Specifica Stato Commento
{{SpecName('CSS4 Images', '#the-object-fit', 'object-fit')}} {{Spec2('CSS4 Images')}}
{{SpecName('CSS3 Images', '#the-object-fit', 'object-fit')}} {{Spec2('CSS3 Images')}} Initial definition

{{cssinfo}}

Compatibilità browser

{{Compat("css.properties.object-fit")}}

Guarda anche