Ajustement d'objet - Astuces CSS

La object-fitpropriété définit la manière dont un élément répond à la hauteur et à la largeur de sa zone de contenu. Il est destiné aux images, vidéos et autres formats multimédias intégrables conjointement avec la object-positionpropriété. Utilisé seul, object-fitnous permet de recadrer une image en ligne en nous donnant un contrôle précis sur la façon dont elle se comprime et s'étire à l'intérieur de sa boîte.

object-fit peut être défini avec l'une de ces cinq valeurs:

fill: c'est la valeur par défaut qui étire l'image pour l'adapter à la zone de contenu, quel que soit son rapport hauteur / largeur.
contain: augmente ou diminue la taille de l'image pour remplir la boîte tout en préservant son rapport hauteur / largeur.
cover: l'image remplira la hauteur et la largeur de sa boîte, en conservant à nouveau son rapport hauteur / largeur mais en recadrant souvent l'image dans le processus.
none: l'image ignorera la hauteur et la largeur du parent et conservera sa taille d'origine.
scale-down: l'image comparera la différence entre noneet containafin de trouver la plus petite taille d'objet concret.

Voici comment nous pourrions définir cette propriété:

img ( height: 120px; ) .cover ( width: 260px; object-fit: cover; )

Étant donné que la deuxième image a un rapport hauteur / largeur différent de l'image d'origine sur la gauche, elle s'étendra en dehors du domaine de sa zone de contenu, recadrant les parties supérieure et inférieure de l'image.

Il convient de noter que par défaut, l'image est centrée dans sa zone de contenu, mais cela peut être modifié avec la object-positionpropriété.

Démo

La démo ci-dessous montre cinq exemples détaillant comment nous pourrions vouloir qu'une image soit écrasée dans une zone de contenu parfois plus petite ou plus grande que sa largeur d'origine (redimensionnez le navigateur pour une meilleure idée de la façon dont cela pourrait fonctionner):

Voir l'ajustement d'objet Pen par Robin Rendle (@robinrendle) sur CodePen.

Si le contenu de l'image ne remplit pas la zone de contenu pour une raison quelconque, l'espace vide affichera l'arrière-plan de l'élément, dans ce cas un arrière-plan gris clair.

Prise en charge du navigateur

Il convient de noter que iOS 8-9.3 et Safari 7-9.1 la object-fitpropriété mais pas object-position.

Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.