Nous avons déjà plusieurs fois parlé de responsive design en abordant les Media Queries et le viewport. Seulement, que se passe-t-il si vous faites en sorte que votre design s’adapte en fonction de la résolution du visiteur mais que ce dernier arrive avec un terminal d’une largeur de 500 pixels alors qu’une image de votre contenu en fait 600 (par exemple) ? L’image démolira tous vos efforts et, en plus d’ajouter un défilement horizontal que vous vouliez éviter, le rendu sera moche.

Redimensionner des images via CSS

Il est possible de redimensionner des images via CSS, que vous fassiez ça pour votre design ou même tout simplement pour éviter d’avoir plusieurs versions de la même image (pour obtenir des miniatures). Pour cela, c’est en fait très simple : il suffit d’indiquer une largeur et une hauteur à l’image via les propriétés bien connues width et height. Par exemple, le code ci-dessous redimensionnera toutes les images pour leur faire atteindre les dimensions d’un carré de 50 x 50 pixels.

img {
	width: 50px;
	height: 50px;
}

Bien évidemment, si vous ne voulez pas redimensionner toutes les images, il faudra les identifier via une classe ou un identifiant ou même via un chemin. De même, si vous souhaitez que l’image ne soit redimensionnée que si nécessaire, vous pouvez utiliser max-width ou max-height. Par exemple, un max-width de 100% forcera les images à être soit plus petites que leur conteneur soit de la même largeur.

img {
	max-width: 100%;
}

Et le ratio dans tout ça ?

C’est bien joli tout ça, et bien pratique mais si vous avez testé, vous vous êtes sûrement rendu compte que le ratio de l’image n’est pas conservé : dans le premier exemple, une image de 600 x 250 pixels sera redimensionnée quoiqu’il arrive à 50 x 50 pixels, tandis que dans le second, si le conteneur fait 200 pixels de large, l’image mesurera 200 x 250 pixels.

Évidemment, c’est moche mais heureusement pour nous, c’est facile à corriger ! En effet, si vous choisissez de redimensionner la largeur (ce qui est le cas le plus souvent), il vous suffira d’indiquer une valeur bien spéciale pour la hauteur : auto.

img {
	max-width: 100%;
	height: auto;
}

Et là, la magie opère, tout est parfait : si votre image de 600 x 250 pixels est redimensionnée à 200 pixels de largeur, la hauteur sera également redimensionnée à la bonne valeur, qui est donc ici d’environ 83 pixels. Bien évidemment, la même chose fonctionne pour une largeur automatique.