Comment gérer les problèmes de redimensionnement d’images en CSS ?

Le redimensionnement d’image est souvent un case tête et cela se transforme en vrai jeu d’équilibriste pour contenter les besoins du propriétaire du site internet qui souhaite avoir le moins de manipulation possible et le webmaster qui, lui, est confronté aux contraintes techniques.
En effet, il n’est pas rare, en tant que simple utilisateur final du site web de vouloir simplement entrer l’image et désirer qu’elle se redimensionne automatiquement, mais surtout parfaitement et cela, quelque soit la situation. Mais voilà, une problématique se présente : comment avoir un rendu cohérent lorsque l’on à une photo verticale dans un encart horizontale, et vice-versa ?

Lorsque l’on souhaite entrer une image verticale dans un bloc horizontal ou une image horizontale dans un bloc vertical, nous nous retrouvons avec un rendu peu ergonomique (plein de marges) ou une image déformée : rien de bien reluisant…

object-fit:cover; ou comment adapter une image efficacement !

Il y a quelques semaines, lors de la conception d’un site WordPress, le propriétaire a uploadé des images qui ne s’adaptaient pas aux encarts qui leur étaient assignés (dans mon cas, c’était des images au format « portait » pour des encarts carrés. Résultat : la présence de marges très laides à gauche et à droite de l’image). Face à ce rendu, j’ai donc découvert et mis en place la fonction CSS object-fit qui résout cette problématique en ajustant l’image, sans la pixeliser. Cette fonction prend en compte la hauteur et la largeur du container dans lequel se trouve l’image et cette dernière s’adapte pour couvrir la zone (via un effet de zoom centré)  comme dans l’exemple ci-dessous :

Si vous êtes confronté à un problème de redimensionnement, je vous invite à la tester en recopiant/adaptant le code ci-dessous :

img {
width: 150px; 
height: 150px; 
object-fit: cover; 
}

On adapte la taille de l’image à l’espace disponible, puis on applique la fonctionnalité object-fit.

Article proposé par Maxime Denizon, webmaster freelance.

•