CSS propriété object-fit
Propriété CSS object-fit
La propriété CSS object-fit est utilisée pour spécifier comment une <img> ou <video> doit être redimensionnée pour s'adapter à son conteneur.
Cette propriété peut prendre l'une des valeurs suivantes :
-
fill- C'est la valeur par défaut. Elle ne préserve pas le rapport d'aspect. L'image est redimensionnée pour remplir le conteneur (l'image sera étirée ou comprimée pour s'adapter). -
cover- Préserve le rapport d'aspect et l'image remplit le conteneur. Coupe le contenu débordant si nécessaire. -
contain- Préserve le rapport d'aspect et ajuste l'image à l'intérieur du conteneur, sans couper - laisse de l'espace vide si nécessaire. -
none- L'image n'est pas redimensionnée. -
scale-down- L'image est réduite à la plus petite version denoneoucontain.
Utilisation de object-fit: fill;
La valeur object-fit: fill; ne préserve pas le rapport d'aspect, et l'image est redimensionnée pour remplir le conteneur (l'image sera étirée ou comprimée pour s'adapter) :
Exemple
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: fill;
} Utilisation de object-fit: cover;
La valeur object-fit: cover; préserve le rapport d'aspect et l'image remplit le conteneur. L'image sera coupée pour s'adapter :
Exemple
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
} Utilisation de object-fit: contain;
La valeur object-fit: contain; préserve le rapport d'aspect et ajuste l'image à l'intérieur du conteneur, sans couper - laissera de l'espace vide si nécessaire :
Exemple
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: contain;
} Utilisation de object-fit: none;
La valeur object-fit: none; ne redimensionne ni ne met à l'échelle l'image :
Exemple
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: none;
} Utilisation de object-fit: scale-down;
La valeur object-fit: scale-down; réduit l'image à la plus petite version de none ou contain :
Exemple
.image-container {
width: 200px;
height: 300px;
border: 1px solid black;
margin-bottom: 25px;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: scale-down;
} Un autre exemple
Ici, nous avons deux images et nous voulons qu'elles remplissent 50 % de la largeur de la fenêtre du navigateur et 100 % de la hauteur du conteneur.
Dans l'exemple suivant, nous n'utilisons PAS object-fit , donc lorsque nous redimensionnons la fenêtre du navigateur, le rapport d'aspect des images sera déformé :
Exemple
Dans l'exemple suivant, nous utilisons object-fit: cover; , donc lorsque nous redimensionnons la fenêtre du navigateur, le rapport d'aspect des images est préservé :
Exemple
Propriétés CSS object-*
Le tableau suivant répertorie les propriétés CSS object-* :
| Propriété | Description |
|---|---|
| object-fit | Spécifie comment une <img> ou <video> doit être redimensionnée pour s'adapter à son conteneur |
| object-position | Spécifie comment une <img> ou <video> doit être positionnée avec des coordonnées x/y à l'intérieur de sa "propre boîte de contenu" |