Une plongée profonde dans l'ajustement des objets et la taille de l'arrièreplan en CSS —

Nous ne sommes pas toujours en mesure de charger des images de tailles différentes pour un élément HTML. Si nous utilisons une largeur et une hauteur qui ne sont pas proportionnelles au rapport hauteur/largeur de l'image, l'image peut être compressée ou étirée. Ce n'est pas bon, et cela peut être résolu soit avec object-fit pour un élément img soit en utilisant background-size.

Tout d'abord, définissons le problème. Considérez la figure suivante :

Pourquoi cela se produit-il ?

Une image aura un rapport hauteur/largeur et le navigateur remplira la boîte contenant cette image. Si le rapport hauteur/largeur de l'image est différent de la largeur et de la hauteur spécifiées, le résultat sera une image compressée ou étirée.

Nous le voyons dans la figure suivante :

La solution

Nous n'avons pas toujours besoin d'ajouter une image de taille différente lorsque le rapport hauteur/largeur de l'image ne correspond pas à la largeur et à la hauteur de l'élément conteneur. Avant de plonger dans les solutions CSS, je veux vous montrer comment nous faisions cela dans les applications de retouche photo :

Maintenant que nous comprenons comment cela fonctionne, voyons comment cela fonctionne dans le navigateur. (Alerte spoiler : C'est plus facile !)

CSS object-fit

La propriété object-fit définit comment le contenu d'un élément remplacé tel as img ou video doit être redimensionné pour s'adapter à son conteneur. La valeur par défaut pour object-fit est fillce qui peut entraîner un écrasement ou un étirement d'une image.

Passons en revue les valeurs possibles.

Possible Values ​​for object-fit

object-fit : contain

Dans ce cas, l'image sera redimensionné pour s'adapter au rapport hauteur/largeur de son conteneur. Si le rapport hauteur/largeur de l'image ne correspond pas à celui du conteneur, elle sera mise en boîte aux lettres.

object-fit: cover

Ici, l'image sera également redimensionnée pour s'adapter au rapport hauteur/largeur de son conteneur, et si le rapport hauteur/largeur de l'image ne correspond pas à celui du conteneur, elle sera alors découpée pour s'adapter.[19659028]object-fit: cover »/>

object-fit: fill

Avec cela, l'image sera redimensionnée pour s'adapter au rapport hauteur/largeur de son conteneur, et si le rapport hauteur/largeur de l'image ne correspond pas à celui du conteneur, elle sera soit comprimée soit étirée. Nous ne voulons pas de cela.

object-fit : none

Dans ce cas, l'image ne sera pas du tout redimensionnée, ni étirée ni comprimée. Il fonctionne comme la valeur covermais il ne respecte pas le rapport hauteur/largeur de son conteneur.

Outre object-fitnous avons également la propriété object-positionqui est responsable du positionnement d'une image dans son conteneur.

Valeurs possibles pour object-position

La propriété object-position fonctionne de manière similaire à la propriété CSS background-position :

Les mots-clés top et bottom fonctionnent également lorsque le rapport hauteur/largeur de la boîte conteneur est verticalement plus grand :

CSS background-size

Avec background-sizela première différence est que nous avons affaire à l'arrière-plan, pas à un HTML (img).

Valeurs possibles pour background-size

Les valeurs possibles pour background-size sont autocontain et cover.

background-size: auto

Avec autol'image restera à sa taille par défaut :

background-size: cover

Ici, l'image sera redimensionnée pour tenir dans le conteneur. Si les proportions ne sont pas les mêmes, l'image sera masquée pour s'adapter. d'une image. ( Grand aperçu)

background-size:contain

Dans ce cas, l'image sera redimensionnée pour tenir dans le conteneur. Si les proportions sont désactivées, l'image sera en boîte aux lettres comme indiqué dans l'exemple suivant :

Quant à background-positionil est similaire au fonctionnement de object-position. La seule différence est que la position par défaut de object-position est différente de celle de background-position.

Quand ne pas utiliser object-fit ou background-size

Si l'élément ou l'image a une hauteur fixe et a soit background-size: cover ou object-fit: cover appliqué à cela, il y aura un point où l'image sera trop large, perdant ainsi des détails importants qui pourraient affecter la façon dont l'utilisateur perçoit l'image.

Considérez l'exemple suivant dans lequel l'image reçoit une hauteur fixe :

 .card__thumb {
    hauteur : 220px ;
}

Si le conteneur de la carte est trop large, cela donnera ce que nous voyons à droite (une image trop large). C'est parce que nous ne spécifions pas de rapport hauteur/largeur.

Il n'y a qu'un des deux correctifs pour cela. La première consiste à utiliser le hack de remplissage pour créer un ratio intrinsèque.

.card__thumb {
    position : relative ;
    rembourrage en bas : 75 % ;
    hauteur : 0 ;
}

.card__thumb img {
    position : absolue ;
    à gauche : 0 ;
    haut : 0 ;
    largeur : 100 % ;
    hauteur : 100 % ;
    ajustement à l'objet : couverture ;
}

Le deuxième correctif consiste à utiliser la nouvelle propriété CSS aspect-ratio. En l'utilisant, nous pouvons effectuer les opérations suivantes :

.card__thumb img {
    rapport d'aspect : 4/3 ;
}

Remarque : J'ai déjà écrit sur la propriété aspect-ratio en détail au cas où vous voudriez en savoir plus : « Let's Learn About Ratio d'aspect dans CSS".

Cas d'utilisation et exemples

Avatars d'utilisateurs

Un cas d'utilisation parfait pour object-fit : cover sont les avatars d'utilisateurs. Le rapport hauteur/largeur autorisé pour un avatar est souvent carré. Placer une image dans un conteneur carré pourrait déformer l'image.

.c-avatar {
    ajustement à l'objet : couverture ;
}

Liste des logos

Répertorier les clients d'une entreprise est important. Nous utiliserons souvent des logos à cette fin. Étant donné que les logos auront des tailles différentes, nous avons besoin d'un moyen de les redimensionner sans les déformer.

Heureusement, object-fit:contain est une bonne solution pour cela.

.logo__img {
    largeur : 150px ;
    hauteur : 80px ;
    ajustement de l'objet : contenir ;
}

Vignette d'article

Il s'agit d'un cas d'utilisation très courant. Le conteneur d'une vignette d'article peut ne pas toujours avoir une image avec le même rapport hauteur/largeur. Ce problème devrait être résolu par le système de gestion de contenu (CMS) en premier lieu, mais ce n'est pas toujours le cas.

.article__thumb {
    ajustement à l'objet : couverture ;
}

Hero Background

Dans ce cas d'utilisation, la décision d'utiliser un élément img ou un arrière-plan CSS dépendra des éléments suivants :

• L'image est-elle importante ? Si CSS est désactivé pour une raison quelconque, voudrions-nous que l'utilisateur voie l'image ?
• Ou le but de l'image est-il simplement décoratif ?

En fonction de notre réponse, nous pouvons décider quelle fonctionnalité utiliser. Si l'image est importante :

.héros {
    position : relative ;
}

.hero__thumb {
    position : absolue ;
    à gauche : 0 ;
    haut : 0 ;
    largeur : 100 % ;
    hauteur : 100 % ;
    ajustement à l'objet : couverture ;
}

Si l'image est décorativenous pouvons utiliser background-image:

.hero {
    position : relative ;
    background-image: linear-gradient(to top, #a34242, rgba(0,0,0,0), url("http://www.smashingmagazine.com/thumb.jpg");
    background-repeat : pas de répétition ;
    taille de l'arrière-plan : couverture ;
}

Le CSS est plus court dans ce cas. Assurez-vous que tout texte placé sur l'image est lisible et accessible.

Ajout d'un arrière-plan à une image avec object-fit:contain

Saviez-vous que vous pouvez ajouter un arrière-plan couleur vers img ? Nous en tirerions profit en utilisant également object-fit:contain.

Dans l'exemple ci-dessous, nous avons une grille d'images. Lorsque les proportions de l'image et du conteneur sont différentes, la couleur d'arrière-plan apparaît.

img {
    ajustement de l'objet : contenir ;
    couleur d'arrière-plan : #def4fd ;
}

Élément vidéo

Avez-vous déjà eu besoin d'une vidéo comme arrière-plan ? Si c'est le cas, vous vouliez probablement qu'il occupe toute la largeur et la hauteur de son parent.

.hero {
    position : relative ;
    couleur d'arrière-plan : #def4fd ;
}

.hero__video {
    poste : absolu ;
    à gauche : 0 ;
    haut : 0 ;
    largeur : 100 % ;
    hauteur : 100 % ;
}

Pour qu'il couvre entièrement la largeur et la hauteur de son parent, nous devons remplacer la valeur par défaut object-fit :

.hero__video {
    /* autres styles */
    ajustement à l'objet : couverture ;
}

Conclusion

Comme nous l'avons vu, object-fit et background-size sont très utiles pour gérer différents formats d'image. Nous n'aurons pas toujours le contrôle sur la définition des dimensions parfaites pour chaque image, et c'est là que ces deux fonctionnalités CSS brillent.

Un rappel amical sur les implications d'accessibilité du choix entre un élément img et un CSS background : Si l'image est purement décorative, optez pour un arrière-plan CSS. Sinon, un img est plus approprié.

J'espère que vous avez trouvé cet article utile. Merci d'avoir lu.

(vf, yk, il, al)