Prenons une image...
<img src="img/johnny.jpg">
Si on lui donne une largeur ET une hauteur, alors elle se déforme :
width:140px;
height:140px;Idem si on fixe son ratio avec aspect-ratio :
width:140px;
aspect-ratio: 1 / 1;aspect-ratio c'est donc le rapport entre la largeur et la hauteur de l'image.
C'est très pratique quand vous avez une largeur en % par ex,
dans ce cas c'est compliqué d'indiquer une hauteur élastique (en % ça ne marche pas)...
Avec aspect-ratio pas de problème d'unité !
On écrit toujours 2 nombres séparés par le symbole /, avec des espaces entre les chiffres et / , du genre :
aspect-ratio: 16 / 9;
aspect-ratio: 3 / 2;Plusieurs façons d'éviter que l'image soit déformée :
object-fit: cover;Rognée si besoin, jamais de marge visible.
object-fit: contain;Ajustée sans rogner, avec une marge si besoin.
object-fit: none;Image rognée, affichée à sa taille d'origine.
Ca marche aussi avec des images élastiques, en %, en vh ou en vw...
Et avec une image de fond...
background-image:
url('../img/johnny.jpg');Par défaut : image affichée à sa taille d'origine et rognée si besoin (répétée sinon).
background-size: cover;Rognée si besoin, jamais de marge visible.
background-size: contain;Ajustée sans rogner, avec une marge, et répétée (par défaut).
background-size: contain;
background-repeat: no-repeat;Pour empêcher la répétition...
background-size: contain;
background-repeat: no-repeat;
background-position: center center;Pour gérer la position de l'image de fond.