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 !
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...
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: 300px
height: 300px
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 pour contain
et none
, à la différence que cette valeur choisira la taille au rendu final la plus petite (ce qui veut dire que si contain
permet d'avoir une image plus petite que none
, scale-down
choisira d'afficher l'image comme si l'on précisait contain
).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 !
Que vous essayiez de scaler votre start-up, de créer votre premier site internet ou de vous reconvertir en tant que développeur, Believemy est votre nouvelle maison. Rejoignez-nous, évoluez et construisons ensemble l’avenir.