Sintassi

Significato dei valori principali:

• fill: L'oggetto riempie il contenitore deformandosi, se necessario (default).

• contain: L'oggetto si ridimensiona per stare completamente nel contenitore mantenendo le proporzioni.

• cover: L'oggetto copre completamente il contenitore, mantenendo il rapporto e ritagliando se necessario.

• none: Nessun ridimensionamento, viene usata la dimensione originale.

• scale-down: Si comporta come none o contain, a seconda di quale produce il risultato più piccolo.

Esempio proprietà: object-fit

Codice Esempio: object-fit

CODE: CSS

1. .object-fit-box img {

2.   width: 100%;

3.   height: 100%;

4.   object-fit: cover; /* Cambia con fill, contain, etc. */

5. }

Contenuto Esempio: object-fit

Esempio di utilizzo di object-fit

Confronto tra immagini che usano diversi valori di object-fit:

fill

contain

cover

none

scale-down

CSS e HTML per l'esempio con object-fit:

  
  <style>
    .object-fit-box img {
      width: 100%;
      height: 100%;
      object-fit: cover; /* esempio */
    }
  </style>

  <div class="object-fit-box">
    <img src="https://example.com/immagine300x200.jpg" alt="esempio" />
  </div>
  

Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.

Supporto Browser