Comment utiliser CSS object-fit et object-position —

Il existe de nombreuses options pour dimensionnement et positionnement des images d’arrière-plan avec le CSS background-size et background-position propriétés. Le object-fit et object-position Les propriétés nous permettent de faire des choses similaires avec des images intégrées (ainsi que d’autres éléments remplacés comme des vidéos). Dans cet article, nous verrons comment utiliser object-fit pour ajuster les images dans un espace spécifique, et comment utiliser object-position pour obtenir le bon positionnement dans cet espace.

À quoi sert l’ajustement d’objet

Parfois, une image est trop grande pour l’espace dans lequel nous voulons qu’elle rentre. Dans le passé, nous devions soit recadrer l’image dans un éditeur d’images, soit redimensionner l’image en définissant des contraintes de largeur et/ou de hauteur (une option imparfaite), soit effectuer une sorte de détourage compliqué, soit peut-être recourir à l’utilisation d’une image d’arrière-plan à la place (ce qui est dommage si l’image n’est pas uniquement destinée à la décoration).

Le object-fit propriété fait pour les images ce que background-size fait pour les images d’arrière-plan : il fournit des options sur la façon dont une image est affichée dans une zone désignée, en masquant certaines d’entre elles si nécessaire. Cette zone désignée peut avoir une largeur et une hauteur fixes, ou il peut s’agir d’un espace plus réactif tel qu’une zone de grille qui s’agrandit, se rétrécit et fléchit en fonction de la taille de la fenêtre d’affichage du navigateur.

Comment fonctionne l’ajustement d’objet

Chaque élément HTML a sa propre « boîte de contenu », qui représente l’espace qu’il occupe. Par défaut, la zone de contenu d’une image correspond aux dimensions naturelles de l’image.

Lorsque nous appliquons une largeur et/ou une hauteur différente à une image, nous modifions réellement les dimensions de la zone de contenu. Si les dimensions de la zone de contenu changent, l’image remplira toujours la zone de contenu. Donc si nous avons un 300px par 300px image et définissez ses dimensions sur 300px par 200pxl’image apparaîtra déformée.

Le object-fit La propriété nous donne des options sur la façon dont l’image est affichée dans cette zone de contenu redimensionnée. Au lieu qu’elle apparaisse déformée, nous pouvons masquer une partie de l’image ou forcer l’image à ne remplir que partiellement sa zone de contenu afin qu’elle soit entièrement visible et non déformée.

Mise en place

Pour illustrer en détail comment le object-fit propriété fonctionne, nous allons placer une image à l’intérieur d’un div qui est centré à l’aide de la disposition en grille. La div a un fond marron et une bordure pointillée fournie par le ::before pseudo-élément qui nous aidera à comprendre ce qui se passe avec l’image.

Voir le stylo
ajustement à l’objet : configuration par SitePoint (@SitePoint)
sur CodePen.

Pour nos démonstrations d’images, nous utiliserons l’image suivante (d’Oia à Santorin, Grèce). Ses dimensions naturelles sont 400px par 600px.

Notre image est beaucoup plus grande que notre div, et si nous plaçons l’image à l’intérieur de la div, elle débordera, comme indiqué ci-dessous.

Voir le stylo
ajustement à l’objet : setup2 par SitePoint (@SitePoint)
sur CodePen.

Notre objectif est d’empêcher l’image d’éclater hors de son conteneur comme ceci, mais aussi de l’y intégrer confortablement, et object-fit nous aidera à le faire.

Si nous travaillions avec une image d’arrière-plan, nous pourrions définir quelque chose comme background-size: cover et l’image de fond serait limité à la surface du conteneur. Mais comme nous l’avons vu, pour object-fit pour faire quelque chose d’utile, nous devons d’abord définir une hauteur et une largeur sur la boîte de contenu de l’image qui sont différentes de sa taille naturelle. Dans les exemples ci-dessous, nous allons contraindre la largeur et la hauteur de l’image à 100%afin que sa zone de contenu corresponde à la taille de la div conteneur :

img {
  width: 100%;
  height: 100%;
}

Voici à quoi cela ressemble.

Voir le stylo
ajustement à l’objet : setup3 par SitePoint (@SitePoint)
sur CodePen.

L’image et sa zone de contenu s’intègrent désormais parfaitement dans le conteneur, mais l’image est fortement déformée. C’est là que la magie de object-fit vient à notre secours, alors voyons ce qu’il a à offrir.

Ajustement d’une image dans un conteneur avec object-fit

Le object-fit property propose cinq valeurs de mots-clés principales pour déterminer comment notre image sera affichée dans son conteneur. Deux de ces mots-clés — cover et contain — jouent le même rôle que leur cousins ​​de fond.

conforme à l’objet : couverture

Le cover force l’image à couvrir complètement la zone du conteneur, montrant autant que possible l’image sans la déformer :

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Voir le stylo
conforme à l’objet : couverture par SitePoint (@SitePoint)
sur CodePen.

Comme l’image est assez haute, nous voyons toute sa largeur mais pas toute sa hauteur, comme illustré dans l’image ci-dessous.

Le cover La valeur est probablement la plus utile de celles proposées, étant l’option de choix dans la plupart des circonstances.

Il convient de noter ici le positionnement de l’image. Contrairement à background-positionqui par défaut est 0 0 (positionnement de l’image d’arrière-plan en haut à gauche du conteneur), la valeur par défaut object-position est 50% 50%, qui centre l’image dans sa zone de contenu. Quand on regarde le object-position propriété plus tard, nous apprendrons comment spécifier quelle partie de l’image est visible.

ajustement à l’objet : contenir

Le contain force l’image à tenir entièrement dans sa zone de contenu mais sans distorsion. L’image conserve son rapport d’aspect naturel et ne remplit donc pas son conteneur :

img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

Voir le stylo
ajustement à l’objet : contenir par SitePoint (@SitePoint)
sur CodePen.

Il pourrait sembler que nous obtiendrions le même résultat ci-dessus en définissant simplement height: 100% sur l’image et rien d’autre. Mais pas tout à fait, car cela laisserait l’image positionnée à gauche plutôt qu’au centre, ce qui est la valeur par défaut avec object-fit. En combinaison avec object-position, object-fit fournit plus d’options pour la façon dont l’image est positionnée dans le conteneur.

ajustement à l’objet : aucun

Le none propriété permet à l’image de conserver ses dimensions naturelles et originales. Seule la quantité pouvant tenir dans la zone de contenu redimensionnée est visible.

Voir le stylo
ajustement à l’objet : aucun par SitePoint (@SitePoint)
sur CodePen.

Contrairement à object-fit: cover, notre image n’est pas obligée d’être complètement visible sur au moins un axe. L’image d’origine est plus large et plus haute que la zone de contenu, elle déborde donc dans les deux sens, comme illustré ci-dessous.

Notez, encore une fois, que le centre de l’image s’aligne avec le centre de la zone de contenu par défaut.

Notez également que object-fit: none ne veut pas dire object-fit fait « rien ». Comme nous pouvons le voir, il fait beaucoup par rapport à aucun object-fit réglage du tout. (Voir ce qui se passe dans le stylo ci-dessus si vous supprimez object-fit: none pour rappel.)

ajustement à l’objet : réduction

Le scale-down la propriété fait la même chose que none ou contain. Il choisit selon ce qui fera apparaître l’image plus petite.

Voir le stylo
ajustement à l’objet : réduction par SitePoint (@SitePoint)
sur CodePen.

Évidemment, dans notre exemple actuel, contain est ce qu’il choisira, car notre conteneur est plus petit que l’image. Si notre conteneur était plus grand que l’image, none prévaudrait et l’image resterait à sa taille naturelle plutôt que de remplir le conteneur dans une seule direction, comme vous pouvez le voir dans cette démo CodePen.

ajustement à l’objet : remplir

Si nous changeons le object-fit valeur à fill dans notre démo, c’est comme si object-fit n’est pas défini du tout. En effet, par défaut, l’image remplit sa zone de contenu, quelles que soient les dimensions définies.

Voir le stylo
ajustement à l’objet : remplir par SitePoint (@SitePoint)
sur CodePen.

Parce que le fill propriété est susceptible de déformer une image, ce n’est probablement pas la meilleure vers laquelle se tourner dans la plupart des cas.

Utiliser object-fit sans conteneur

Dans les exemples ci-dessus, nous avons utilisé object-fit pour dimensionner une image dans un conteneur div, mais les principes que nous avons vus dans la pratique fonctionnent aussi bien sans ce conteneur. Ce qui est important, c’est la taille de la zone de contenu de l’image et la façon dont l’image est affichée dans cette zone.

Par exemple, nous pourrions appliquer le CSS suivant à l’image, sans aucune div environnante :

img {
  width: 300px;
  height: 300px;
  object-fit: contain;
}

Le résultat est montré dans la démo CodePen ci-dessous.

Voir le stylo
ajustement à l’objet : pas de conteneur par SitePoint (@SitePoint)
sur CodePen.

Essayez de changer les valeurs sur le object-fit propriété dans l’enclos ci-dessus pour cover, fill, scale-down et none pour voir comment chacun se comporte. Les résultats sont les mêmes que si l’image était définie sur une largeur et une hauteur de 100% et contenu dans une div définie sur 300px par 300px.

Utilisation de l’ajustement d’objet dans les mises en page réactives

Le object-fit La propriété est probablement plus utile dans les situations où les dimensions de la zone désignée de l’image répondent à la taille de la fenêtre du navigateur. La démonstration suivante affecte notre image à une zone de grille spécifique et flexible :

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  grid-row: 2 / 3; 
  grid-column: 2 / 3;
}

article {
  display: grid; 
  grid-template: 5% 1fr 10% / 40% 1fr 40%; 
  height: 100vh;
}

Voir le stylo
ajustement d’objet dans une zone réactive par SitePoint (@SitePoint)
sur CodePen.

Au fur et à mesure que les zones de la fenêtre et de la grille s’agrandissent et se contractent, cover garantit que l’image s’intègre toujours bien dans sa zone de grille, en modifiant la quantité de l’image visible afin qu’elle ne soit jamais déformée. (Découvrez la démo en vue pleine page pour en avoir le meilleur sens.)

Réglage de la position des images avec object-position

Tout comme background-position est utilisé pour définir le positionnement d’une image de fond dans son contenant, le object-position La propriété est utilisée pour contrôler le positionnement d’un élément d’image dans sa propre zone de contenu.

Comme nous l’avons vu, object-position par défaut à 50% 50%, ce qui signifie que le centre de l’image s’aligne avec le centre de sa zone de contenu. Nous pouvons changer cela avec une plage de valeurs de mots clés (top, bottom, left, right, center), ou en utilisant des valeurs de longueur (telles que px, emou %), ou en utilisant des combinaisons des deux.

Disons que nous voulons maintenant positionner notre image en bas à droite. Nous pourrions utiliser les mots clés right bottomou valeurs en pourcentage 100% 100%:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right bottom; 
}

Voir le stylo
objet-position 1 : mots-clés par SitePoint (@SitePoint)
sur CodePen.

L’image ci-dessous illustre le positionnement de notre image maintenant.

Vous pouvez jouer avec les mots-clés de positionnement dans le stylo ci-dessus pour voir comment ils fonctionnent, ainsi que le object-fit mots-clés, mais les résultats doivent être faciles à prédire.

Nous pouvons également décaler l’image de son conteneur avec des unités telles que pixels ou ems. Par exemple:

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 20px 2em; 
}

Voir le stylo
position d’objet 2 : unités par SitePoint (@SitePoint)
sur CodePen.

Nous pourrions faire un décalage similaire à partir du bas à droite en combinant des unités et des mots-clés, comme ceci :

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right 20px bottom 2em; 
}

Voir le stylo
object-position 3 : unités et mots-clés par SitePoint (@SitePoint)
sur CodePen.

Nous avons déjà vu que nous pouvons positionner notre image dans sa zone de contenu avec des pourcentages. Comme avec le propriété background-positionen utilisant des pourcentages avec object-position peut être un peu déroutant. Un object-position de 50% 50% signifie que le centre de l’image s’aligne avec le centre de sa zone de contenu sur les axes horizontal et vertical.

Si nous fixons le object-position pour 20% 40%cela signifie qu’une ligne verticale à 20 % de la gauche de l’image coïncide avec une ligne verticale à 20 % de la gauche de la zone de contenu, et qu’une ligne horizontale à 40 % du haut de l’image coïncide avec une ligne horizontale à 40 % du haut de la zone de contenu, comme illustré ci-dessous.

Nous pouvons le voir en pratique dans la démo CodePen ci-dessous.

Voir le stylo
position d’objet 4 : pourcentages par SitePoint (@SitePoint)
sur CodePen.

Conclusion

Le object-fit propriété est conçue pour fonctionner avec tout type de éléments remplacés, tels que des images, des vidéos, des iframes et des intégrations. L’utilité d’intégrer des éléments tels que des vidéos dans une zone définie (où une partie de l’élément peut être masquée) est peut-être un sujet de débat, mais il existe sans aucun doute des cas d’utilisation viables. Une meilleure option pourrait être de définir la largeur d’un iframe à width: 100% de l’espace disponible, puis utilisez le ratio d’aspect propriété pour conserver ses proportions.

Il est plus courant d’avoir un espace spécifique dans lequel une image doit tenir, donc object-fit est très utile pour permettre à l’image de s’insérer dans cet espace sans être déformée (même si une partie doit être masquée).

En apprendre davantage sur object-fit et object-positionconsultez les pages MDN pour ces propriétés :

Enfin, comme indiqué ci-dessus, il vaut la peine de comparer les object-fit et object-position propriétés avec le background-size et background-position propriétés, qui ont beaucoup de similitudes. Vérifier Comment utiliser CSS background-size et background-position pour se mettre au diapason avec eux.