CSS La propriété object-fit
La propriété CSS object-fitest utilisée pour spécifier comment un <img> ou <video> doit être redimensionné pour s'adapter à son conteneur.
La propriété CSS object-fit
La propriété CSS object-fitest utilisée pour spécifier comment un <img> ou <video> doit être redimensionné pour s'adapter à son conteneur.
Cette propriété indique au contenu de remplir le conteneur de différentes manières ; comme "préserver ce rapport d'aspect" ou "étirer et prendre autant d'espace que possible".
Regardez l'image suivante de Paris. Cette image fait 400 pixels de large et 300 pixels de haut :
Cependant, si nous stylisons l'image ci-dessus pour qu'elle ait la moitié de sa largeur (200 pixels) et la même hauteur (300 pixels), elle ressemblera à ceci :
Exemple
img {
width: 200px;
height:
300px;
}
Nous voyons que l'image est écrasée pour s'adapter au conteneur de 200x300 pixels (son format d'image d'origine est détruit).
C'est ici qu'intervient la object-fitpropriété. La object-fitpropriété peut prendre l'une des valeurs suivantes :
fill- C'est par défaut. L'image est redimensionnée pour remplir la dimension donnée. Si nécessaire, l'image sera étirée ou écrasée pour s'adaptercontain- L'image conserve son rapport d'aspect, mais est redimensionnée pour s'adapter à la dimension donnéecover- L'image conserve son rapport d'aspect et remplit la dimension donnée. L'image sera coupée pour s'adapternone- L'image n'est pas redimensionnéescale-down- l'image est réduite à la plus petite version denoneoucontain
Utilisation de l'ajustement à l'objet : couverture ;
Si nous utilisons object-fit: cover;l'image conserve son rapport d'aspect et remplit la dimension donnée. L'image sera coupée pour s'adapter :
Exemple
img {
width: 200px;
height:
300px;
object-fit: cover;
}
Utilisation de l'ajustement d'objet : contenir ;
Si nous utilisons object-fit: contain;l'image conserve son rapport d'aspect, mais est redimensionnée pour s'adapter à la dimension donnée :
Exemple
img {
width: 200px;
height:
300px;
object-fit: contain;
}
Utilisation de l'ajustement d'objet : remplir ;
Si nous utilisons object-fit: fill;l'image est redimensionnée pour remplir la dimension donnée. Si nécessaire, l'image sera étirée ou écrasée pour s'adapter :
Exemple
img {
width: 200px;
height:
300px;
object-fit: fill;
}
Utilisation de l'ajustement d'objet : aucun ;
Si nous utilisons object-fit: none;l'image n'est pas redimensionnée :
Exemple
img {
width: 200px;
height:
300px;
object-fit: none;
}
Utilisation de l'ajustement d'objet : réduction ;
Si nous utilisons object-fit: scale-down;l'image est réduite à la plus petite version de noneou
contain:
Exemple
img {
width: 200px;
height:
300px;
object-fit: scale-down;
}
Un autre exemple
Ici, nous avons deux images et nous voulons qu'elles remplissent la largeur de 50% de la fenêtre du navigateur et 100% de la hauteur.
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étruit :
Exemple
Dans l'exemple suivant, nous utilisons object-fit: cover;, ainsi lorsque nous redimensionnons la fenêtre du navigateur, le rapport d'aspect des images est conservé :
Exemple
CSS object-fit Plus d'exemples
L'exemple suivant illustre toutes les valeurs possibles de la object-fitpropriété dans un exemple :
Exemple
.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Objet CSS-* Propriétés
Le tableau suivant répertorie les propriétés CSS object-* :
| Property | Description |
|---|---|
| object-fit | Specifies how an <img> or <video> should be resized to fit its container |
| object-position | Specifies how an <img> or <video> should be positioned with x/y coordinates inside its "own content box" |