Vous savez ce que c'est... Cette fameuse photo de profil que vous souhaitez afficher pour votre utilisateur avec des coins arrondis et qui se trouve devenir un parcours du combattant à cause des dimensions de la photo d'origine... Heureusement, grâce à CSS, il est très simple de redimensionner une image sans la compresser, voyons tout ça ensemble !
Le problème avec les images
Lorsque nous souhaitons afficher une image, il ne faut pas oublier que sa taille d'origine peut vite devenir gênante : en mode portrait ou en mode paysage, lorsque nous souhaitons afficher celle-ci sous forme carrée, ou même uniquement la redimensionner, ça peut vite devenir difficile à manipuler à la longue...
Un petit exemple
Voici un exemple représentant une photo de profil qui se retrouve très compressée :
<p>Votre photo de profil</p>
<img src="https://image.freepik.com/free-photo/asian-women-traditional-japanese-kimonos-fushimi-inari-shrine-kyoto-japan_335224-245.jpg" alt="Japon" />p {
font-weight: bold;
font-family: arial;
font-size: 1.5rem;
}
img {
width: 300px;
height: 300px;
border-radius: 50%;
}Le problème sur cet exemple, c'est que la photo de profil est réduite sur la largeur et l'image se retrouve très compressée afin de rentrer dans les dimensions que nous avons précisées avec le CSS de la balise img :
width: 300pxheight: 300px
La solution miracle
Heureusement, CSS nous permet de redimensionner une image en ne déformant pas son affichage, tout ceci grâce à la propriété object-fit.
Cette petite propriété peut prendre toutes ces valeurs :
fill- L'image doit respecter les dimensions données, et tant pis si elle est déformée ;contain- L'image doit être contenue dans les dimensions données, mais respecter son ratio d'origine ;cover- L'image doit être contenue dans les dimensions données et s'adapter afin de ne laisser aucun espace blanc ;none- L'image doit respecter les dimensions, mais elle n'est pas redimensionnée : on garde la taille d'origine et on coupe juste l'image lorsqu'elle dépasse de la largeur et la hauteur précisées ;scale-down- C'est à peu près pareil que pourcontainetnone, à la différence que cette valeur choisira la taille au rendu final la plus petite (ce qui veut dire que sicontainpermet d'avoir une image plus petite quenone,scale-downchoisira d'afficher l'image comme si l'on précisaitcontain).
Dans toutes ces possibilités, vous l'avez deviné... Nous avons besoin de cover !
Son fonctionnement est identique à la propriété background-size: cover que vous aviez déjà peut-être utilisé, l'image sera représentée afin de ne laisser aucun vide, mais sans la déformer.
Nous avons donc le code suivant pour que notre exemple fonctionne parfaitement bien :
p {
font-weight: bold;
font-family: arial;
font-size: 1.5rem;
}
img {
width: 300px;
height: 300px;
border-radius: 50%;
object-fit: cover;
}En ajoutant uniquement la propriété object-fit: cover sur toutes vos images, vous pourrez les redimensionner sans les compresser. Il ne reste plus qu'à vous amuser avec cette propriété !
Si vous souhaitez en savoir plus notamment sur le HTML et le CSS, nous avons une formation complète dédiée à ces deux langages. N'oubliez pas de partager cet article à votre entourage si vous pensez qu'ils peuvent en avoir besoin, vous leur rendriez un grand service pour leurs images !
