Propriété CSS object-fit

Le CSS object-fit La propriété est utilisée pour spécifier comment un ou

La propriété CSS object-fit

Le CSS object-fit La propriété est utilisée pour spécifier comment un ou

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 :

Nous voyons que l’image est écrasée pour s’adapter au conteneur de 200×300 pixels (son format d’image d’origine est détruit).

Voici où le object-fit la propriété entre en jeu. Le object-fit proprié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’adapter
• contain – L’image conserve son rapport d’aspect, mais est redimensionnée pour s’adapter à la dimension donnée
• cover – L’image conserve son rapport d’aspect et remplit la dimension donnée. L’image sera coupée pour s’adapter
• none – L’image n’est pas redimensionnée
• scale-down – l’image est réduite à la plus petite version de none ou
contain

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 :

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 :

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 :

Utilisation de l’ajustement d’objet : aucun ;

Si nous utilisons object-fit: none; l’image n’est pas redimensionnée :

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 none ou
contain:

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-fitdonc lorsque nous redimensionnons la fenêtre du navigateur, le rapport d’aspect des images sera détruit :

Dans l’exemple suivant, nous utilisons object-fit: cover;ainsi lorsque nous redimensionnons la fenêtre du navigateur, les proportions des images sont conservées :

CSS object-fit Plus d’exemples

L’exemple suivant montre toutes les valeurs possibles de object-fit propriété dans un exemple :

Objet CSS-* Propriétés

Le tableau suivant répertorie les propriétés CSS object-* :

Propriété	Description
ajustement à l’objet	Spécifie comment un ou
position de l’objet	Spécifie comment un ou