Object-fit per Immagini Responsive
La proprietà object-fit definisce come un elemento sostituito (img, video) si adatta al suo contenitore.
Valori disponibili
.image {
width: 300px;
height: 200px;
object-fit: cover; /* Riempie, taglia se necessario */
object-fit: contain; /* Contiene tutto, può avere spazi */
object-fit: fill; /* Distorce per riempire */
object-fit: none; /* Dimensioni originali */
object-fit: scale-down; /* Come none o contain, quello più piccolo */
}object-position
.image {
object-fit: cover;
object-position: top center; /* Punto focale */
object-position: 20% 80%;
}Card con immagine
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}