Expérience
Freelance depuis 2009
Sites internet
Près de 500 réalisations
Vidéos d'animations
Plus de 50 projets pris en charge
Harmoniser l’affichage de vos images en les recadrant sans les retoucher avec la propriété css object-fit
Lorsque l'on publie du contenu en ligne via un site internet, il est particulièrement important que les images que nous utilisons s'affichent de manière harmonieuses et cohérentes. D'autant plus lorsqu'on inclue la dimension responsive.
Or, la possibilité de les retouchers ou les recadrer à la main n'est pas toujours possible ou très pratique. D'autant plus quand les images fournies ne sont pas optimisées ou même que la quantité est beaucoup trop importante.
Une astuce très intéressante, voire incontournable est d'utiliser la propriété object-fit des images. Cette propriété a probablement du voir le jour avec l'apparition du css3.
Qu'importe, elle reste très utile et est très intéressante.
La propriété css object-fit pour les images, comment ça marche ?
En somme, cette propriété va nous permettre, de "recadrer" l'image dans un conteneur défini simplement par les dimensions de celle ci.
Comprendre le fonctionnement de la propriété ocbject-fit pour faciliter l'intégration de vos maquettes graphiques
Prenons un exemple basique, avec une rangée de 3 colonnes dans chacune desquelles on désire afficher une image. On pourrait, sans recadrer nos images dans notre logiciel graphique, nous retrouver dans une situation comme celle-ci.
Avec au mieux des images centrées verticalement mais dont le format et les dimensions manquent toutefois d'harmonie. On pourrait être tenté de rapidement passer une couche de photoshop, d'ajouter un conteneur qui utiliserait la propriété overflow, ou autre, alors que via la propriété object-fit on obtiendra des résultat tout à fait satisfaisant, surtout en cas de grande quantité d'images à prendre en compte dans un tel contexte.
Alors finalement, la propriété object-fit ça marche comment ?
Bien, la première chose à faire pour que l'utilisation de cette propriété fonctionne correctement sera de déterminer quelles seront les dimensions de l'image à afficher via les propriétés style width et height.
img.classedemonImage
{
width: 200px;
height: 300px;
}
En définissant de la sorte les dimensions des images, nous allons restreindre l'affichage de celles ci, mais pas en la déformant ( dans le cas où elles auraient des proportions différentes ), mais plutôt en définissant le cadre dans laquelle elle sera contrainte.
Ensuite, l'utilisation de la propriété qui nous intéresse va permettre, dans le cadre d'affichage donné, de restituer l'image, sans changer ses proportions originales.
On aura donc à la base une image de 600px sur 200px ( par exemple ) qui s'affichera dans un cadre de 200px sur 300px ( dans notre exemple ) sans pour autant subir de déformation.
img.classedemonImage
{
width: 200px;
height: 300px;
object-fit: cover;
}
La valeur cover, ici, contraint l'image à couvrir intégralement le cadre défini par ses dimensions ( sans pour autant la déformer bien entendu )
Pour approfondir, le site w3school propose de plus amples exemples sur l'utilisation de l'object-fit.
