Vous aurez parfois des images qui seront trop grandes ou trop petites pour votre site web.
Bien qu’il soit possible de les redimensionner à la main, ce processus a tendance à être fastidieux et sujet aux erreurs, ce qui complique une tâche simple.
Le CSS offre la possibilité de redimensionner facilement les images en utilisant différentes méthodes pour définir leur largeur et leur hauteur en pixels automatiquement ou manuellement.
Redimensionner une image avec CSS peut permettre de l’afficher dans le bon format sur n’importe quel type d’appareil ce qui ne serait pas possible si vous effectuiez ce redimensionnement sans CSS.
Si vous ne savez pas comment redimensionner une image en CSS, vous êtes alors sur le bon tutoriel pour apprendre les différentes techniques pour redimensionner une image grâce à CSS.
Sommaire :
En CSS vous redimensionnerez une image en définissant une valeur aux propriétés CSS « width » et « height » qui représentent respectivement la largeur et la hauteur de l’image.
L’utilisation de ces propriétés CSS est simple, il vous suffira de leur appliquer une valeur numérique suivie d’une unité comme le pixel (px).
Dans l’exemple suivant, nous redimensionnons les images ciblées par le sélecteur CSS « img » pour qu’elles aient des dimensions de 150 pixels de large sur 150 pixels de haut :
img {
width : 150px;
height : 150px;
}Vous pouvez définir des dimensions fixes aux propriétés « width » et « height » comme avec l’unité « px », mais aussi des dimensions variables avec des unités telles que « % », « vh » ou « vw » qui permettront d’adapter les dimensions des images à leur conteneur ou la taille de l’écran.
Il est aussi possible de définir des dimensions maximales aux images pour qu’elles ne dépassent pas une hauteur ou une largeur donnée.
Vous pouvez définir la largeur et la hauteur maximales d’une image avec les propriétés « max-width » et « max-height » qui prennent pour valeur une valeur numérique et une unité (px, %, vh, vw, em, rem, …).
Les propriétés « max-width », « max-height », « width » et « height » peuvent être combinées pour définir une valeur variable avec « width » et « height », mais imposer des dimensions maximales à l’aide de « max-width » et « max-height » comme dans l’exemple suivant :
img {
width : 10vw;
height : 10vh;
max-width : 200px;
max-height : 150px;
}À l’inverse de « max-width » et « max-height », les propriétés « min-width » et « min-height » définissent la taille d’affichage minimale de l’image.
Par exemple :
img {
width : 100%;
min-width : 600px;
}Dans ce cas, votre image occupera 100% de la largeur du conteneur dans laquelle elle se trouve, mais sa largeur ne sera jamais inférieure à 600px.
Aussi, si le conteneur fais 500px de large, l’image dépassera de 100px. Les propriétés « min-width » et « min-height » sont donc à manier avec précaution pour conserver un design responsive.
Si vous ne souhaitez pas imposer de dimensions précises à vos images, vous pouvez les faire s’adapter à leur conteneur.
Cette méthode a pour avantage d’avoir des images toujours en accord avec leur conteneur et donc lorsque vous modifiez les dimensions des conteneurs, les images s’adapteront automatiquement.
La propriété « max-width » appliquera à l’image cible la largeur maximale de son conteneur, le problème est que la hauteur de l’image ne sera pas adaptée et le ratio de l’image sera donc modifié.
Pour résoudre ce problème, il faudra ajouter une propriété « height » avec la valeur « auto » à l’image pour que la hauteur de l’image s’ajuste en fonction de la largeur en conservant le ratio initial de l’image.
img {
max-width : 100%;
height : auto;
}Comme pour les propriétés « max-width » et « height » vous pouvez appliquer cette même technique avec le couple de propriétés « max-height » et « width ».
L’image s’adaptera à la hauteur de son conteneur grâce à la propriété « max-height » et sa largeur s’ajustera à sa nouvelle hauteur lorsque vous ajouterez la valeur « auto » à la propriété « width » :
img {
max-height : 100%;
width : auto;
}La propriété « object-fit » est très utile pour définir la façon dont une image s’adaptera à son conteneur sans devoir définir les propriétés « max-width », « max-height », « width » ou « height ».
Cette propriété prend pour valeur les mots-clés suivants :
Grâce à « object-fit », votre image sera rognée, étirée ou mise à l’échelle selon la valeur donnée à la propriété CSS.
Pour agrandir une image en CSS, vous devrez donc modifier les propriétés « width » et « height » avec des valeurs plus élevée.
Par exemple, si vous augmentez la largeur en px :
img {
width : 250px;
height : auto;
}À l’inverse, si vous choisissez de définir la hauteur en pixels :
img {
width : auto;
height : 150px;
}Vous pouvez aussi fixer la taille minimale de l’image grâce aux propriétés « min-width » et « min-height » présentées plus haut.
Pour réduire la taille d’une image, il vous faudra, à l’inverse du point précédent, réduire les valeurs définies en « width » et « height ».
Vous pouvez aussi réduire la valeur des propriétés « max-width » et « max-height » pour que l’image ne dépasse pas une certaine taille.
Par exemple :
img {
max-width : 600px;
height : auto;
}Dans ce cas, votre image ne dépassera jamais les 600 pixels de large, quelle que soit la largeur de votre écran.
Vous pouvez redimensionner efficacement les images de votre site web à l’aide de CSS qui met à votre disposition de multiples propriétés pour ajuster les images.
Avec l’apparition de plus en plus de tailles d’écrans différentes, les images d’un site internet doivent être ajustées avec ces propriétés CSS pour s’adapter correctement à tous les écrans.
Si vous avez quelques difficultés pour adapter les images de votre site à différentes tailles d’écran, n’hésitez pas à poster une annonce gratuite sur Codeur.com pour trouver rapidement l’aide d’un freelance qui pourra vous aider à rendre responsive votre site et les images présentes dessus.