Proprietà object-fit

La proprietà object-fit definisce le proporzioni o il ridimensionamento di elementi come immagini o video.

Sintassi

cssselettore {
  object-fit: fill o contain o cover o none;
}

La tabella presenta i valori principali per la proprietà object-fit:

Valore	Descrizione
`fill`	Ridimensionamento dell'elemento per adattarsi alle dimensioni specificate, ignorando le proporzioni dell'elemento.
`contain`	Ridimensionamento dell'elemento per adattarsi alle dimensioni specificate, mantenendo le proporzioni dell'elemento.
`cover`	Le dimensioni dell'elemento vengono modificate per riempire completamente l'area specificata, mantenendo le proporzioni dell'elemento stesso.
`none`	Le dimensioni originali dell'elemento vengono mantenute.

Impostiamo il riempimento della nostra immagine alla dimensione specificata senza mantenere le proporzioni:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: fill;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Ora facciamo in modo che l'immagine riempia il contenitore specificato mantenendo le proporzioni:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: contain;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Riempiamo il nostro contenitore specificato con l'immagine in modo che la dimensione dell'immagine stessa cambi, ma mantenendo le sue proporzioni:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: cover;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат:

Inseriamo semplicemente la nostra immagine nel contenitore specificato mantenendo le sue dimensioni originali:

html<div>
  <img src="bg.png">
</div>

cssimg {
  object-fit: none;
  height: 400px;
  width: 300px;
  border: 1px solid black;
}

Результат: