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.
31 commentaires
l’autre côté magique c’est que le poids de l’image reste identique et pour une image de 600×250 px ça va faire très mal combiné a du ‘responsive’ à la sauce d’aujourd’hui.
Enfin bon c’est la mode et puis on aura tous des forfaits 4G dans 1 an après tout pourquoi s’en faire…
Cela fait maintenant presque 3ans que ce commentaire à été posté et pas tous le monde possède une connexion 4G :p
@Troll Bifleur Je pense que le commentaire était ironique! Prends une biffle!
bah non
Malheureusement, on n’a pas eux besoin du responsive pour voir des site utiliser des images de 2Mo pour des vignettes de 100×100.
Entre le format qui n’est pas toujours le plus adapté (photo en png).
Données exif non effacè (le pire étant la miniature de la photo).
Aussi important que la résolution, augmenter la compression, si possible réduire l’index des couleurs (png,gif), entrelacement(dit affichage progressif) , voir utilisation de sprite css.
En plus une bonne partie de ces opérations sont scriptable.
Donc sans changer la résolution tu peut diviser par 10 (et +) la taille des images, sans perte de qualité significative. Et avoir un rendue de la page plus rapide sans que les image sois complétement chargé (vive l’entrelacement).
et maintenant c’est la vidéo en background ^^ qui dit 4G? ^^
Bonsoir, je m’excuse d’avance du déterrage.
Je pense que si vous faites du « responsive web design » jusqu’au bout, vous pouvez stocker la même image sous différent tailles et charger la taille d’image la plus adaptée au support à l’aide de règles media query via la propriété background-image. Cela permet d’allégé le chargement en chargeant une image plus petite sur un petit écran de téléphone. J’espère avoir fait comprendre mon raisonnement.
Passez une bonne soirée !
Merci pour cette astuce de l’auto, ça m’a bien dépanné. Sinon pour YopSolo, non justement en responsive quand on fait bien les choses on ne balance pas les mêmes images. Avec Apache au moins, c’est une formalité de fournir des images différentes / compressées différemment aux terminaux mobiles.
hello
sans mettre de hauteur, juste width: 45% par exemple, ça marche aussi,l’image garde le ratio.
@Cooltrane: A priori tout dépend du navigateur, je conseille donc d’indiquer la hauteur automatique, ça ne coûte pas grand-chose et au moins ça fonctionne partout.
Merci pour l’astuce, je pensais devoir retoucher un bon paquet d’images à la main, mais avec deux lignes de CSS, tout passe super bien!
Petite astuce toute simple, mais encore fallait-il y penser !
Merci pour le partage, ça m’a bien rendu service :)
Je te remercie grandement juste pour le « height: auto; », je n’y avais pas pensé x)
Pourquoi les images de petits tailles (comme les icones) ne se resize pas avec le responsive design?
ça ne veut pas marcher dans mon code xD
Peut-être que ça ne passe pas parce qu’une règle css est prioritaire sur celle-ci.
Pour contrer ça, tu peux essayer :
img {
max-width: 100% !important;
height: auto !important;
}
!important est à utiliser avec parcimonie, mais des fois, ça dépanne bien ;)
Si ça ne marche toujours pas ou si tu souhaites que cette règle ne s’applique qu’à certaines images, vérifie/modifie ton sélecteur css.
je débute donc je suis vraiment pas fort et tout ne me vient pas encore a l’esprit mais quand vous dites « img » il s’agit d’un terme direct ou est ce que le mot image doit être remplacé pour le nom et le chemin de notre propre image ?
Tout dépend. Ici, j’ai choisi d’appliquer les propriétés à « img » qui est le nom de la balise permettant d’afficher une image en HTML. Autrement dit, les propriétés en question seront appliquées à toutes les images de la page (ce que je conseille fortement quand il s’agit de les rendre responsive).
Après, tu peux aussi choisir de n’appliquer les propriétés qu’à certaines images seulement, et là tout est permis : les images dans un certain conteneur, celles comportant une certaines classes, bref, tu as le choix parmi tous les sélecteurs CSS.
Merci ! ^^
[…] Redimensionner Une Image En CSS En Conservant Le Ratio. 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. […]
J’aurais dû lire ce billet en premier, ça m’aurait évité quelques heures de bidouillage-ratage… :-D
Enfin, merci, ça marche impec’ !
[…] Créations perso. WordPress. Redimensionner une image en CSS en conservant le ratio. […]
chez moi ça fonctionne super bien, mas complicons un peux le bazar.
Moi ce que j’ai besoin pour mon site c’est que l’image s’adapte a l’ecran de l’utilisateur, gsm, tablette, mas quand l’utilisateur a un super grand ecran , PC, moi je veux que mon image de depasse pas ça taille maximale.
Avec
max-width: 100%
, l’image ne dépassera pas sa taille maximale, et ne dépassera pas non plus les bornes du conteneur (donc s’adaptera aux écrans plus petits). À moins que j’ai mal compris ?Bonjour,
Chez moi, rien n’y fait, même avec max-width: 100% !important; la taille de l’image s’adapte à celle de son conteneur et ne se limite pas à sa vraie taille…
Bonjour, cette astuce marche très bien!
Seul souci pour moi, je cherche à faire l’inverse! (une image panorama que je dois affiche en height:100% et width:auto.
Mais ça ne marche pas dans ce sens… au secouuuurr! (peut-être par se que la hauteur de la page est « infini »…?)
[…] en CSS3. Règles de syntaxes CSS pour opacity. -moz-opacity. Générateur Lorem Ipsum en alsacien. Redimensionner une image en CSS en conservant le ratio. Nous avons déjà plusieurs fois parlé de responsive design en abordant les Media Queries et le […]
Bonjour,
J’ai un petit souci avec les images de mon WordPress. En effet, lorsque j’essaie de mettre des images de petits formats cela ne fonctionne pas et WordPress me les agrandit automatiquement. Dans le css j’essaie de redimensionner mes images en mettant « img-art-50 » mais si ce sont des images de 150×150 ça ne me les prend pas (et ça floute)… Avez-vous une solution s’il vous plaît !!! Merci à vous :)
MERCI BEAUCOUP