object-fit

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

Per modificare l'allineamento dell'elemento ridimensionato rispetto al suo contenitore puoi usare la proprietà object-position.

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

fill | contain | cover | none | scale-down

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

Specifiche

Specifica Stato Commento
CSS Images Module Level 4
The definition of 'object-fit' in that specification.
Working Draft
CSS Images Module Level 3
The definition of 'object-fit' in that specification.
Candidate Recommendation Initial definition
Initial valuefill
Applies toreplaced elements
Inheritedno
Computed valueas specified
Animation typediscrete

Compatibilità browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
object-fitChrome Full support 31Edge Full support 16
Notes
Full support 16
Notes
Notes Edge supports object-fit on img elements only. See Edge issue 13603873 for details.
Firefox Full support 36IE No support NoOpera Full support 19
Full support 19
Full support 11.6
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari Full support 10WebView Android Full support 4.4.3Chrome Android Full support 31Firefox Android Full support 36Opera Android Full support 19
Full support 19
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS Full support 10Samsung Internet Android Full support 2.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Guarda anche