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;

Plusieurs façons de gérer le problème :

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.

Il y a d'autres options liées à background, qui sont bien documentée sur le net.