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 :
Déposez gratuitement votre projet sur Codeur.com, recevez une quinzaine de devis et sélectionnez le développeur web idéal.
Trouver un développeur web
Comment définir les dimensions d’une image en CSS
Les propriétés width et height
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.
Les propriétés max-width et max-height
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;
}Les propriétés min-width et min-height
À 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.
Adapter la taille d’une image à son conteneur en CSS
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.
Utiliser la propriété max width et height avec la valeur auto
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;
}
Trouvez le meilleur développeur web sur Codeur.com
Vos premiers devis en 15 minutes
Gratuit et sans obligation
Déjà plus de 75 000 clients
Utiliser la propriété max height et width avec la valeur 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;
}Utiliser la propriété object-fit pour redimensionner une image automatiquement
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 :
- « object-fit: fill; »: Remplis le conteneur avec l’image en ajustant sa largeur et sa hauteur. L’image sera étirée jusqu’à remplir le conteneur.
- « object-fit: contain; »: L’image sera redimensionnée pour être ajustée à son conteneur tout en conservant ses proportions.
- « object-fit: cover; »: L’image sera redimensionnée pour être ajustée à son conteneur tout en conservant son ratio d’affichage. Dans le cas où l’image et le conteneur n’ont pas le même ratio, l’image sera alors rognée pour correspondant au ratio de son conteneur.
- « object-fit: none; »: L’image ne sera pas redimensionnée.
- « object-fit: scale-down; »: Simule les valeurs « none » ou « contain » en fonction de celle qui ajustera l’image à sa taille réelle la plus petite dans son conteneur.
Grâce à « object-fit », votre image sera rognée, étirée ou mise à l’échelle selon la valeur donnée à la propriété CSS.
Comment agrandir une image en 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.
Comment réduire la taille d’une image en CSS ?
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.
Conclusion
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.
