Image en background déformée

Bonjour,
Je dois reproduire le modèle d'un designer qui me fournit une images de 1900px sur 816 px.
Je souhaite qu'elle soit en background et "responsive".
Cela doit s'afficher dans une div

"width : 1900px;"

Quand je la mets en background d'une autre div aux dimensions

"width: 100%; max-height: 816px; "

avec ces indications de background:

background-image: url(monsite/images/gifimage.gif); 
background-repeat:no-repeat; background-size:100% 100%;

mon image est déformée à 1900px sur 522px.
Merci si vous pouvez me dire où j'ai faux ?
Modifié par Horetol (13 Nov 2021 - 14:00)

D'où sort ce 522px ? La hauteur de ton viewport ? La hauteur de ta Div ?
Perso j'utiliserais un

background-size: cover

ou contain avec no-repeat (et une couleur de fond équivalent au fond de l’image) et je mettrais la div à la taille du viewport.

background-size: cover; 

ne semble pas résoudre mon souci.

Mais j'ai enfin compris d'où vient mon problème.
Comme c'est une image en background d'une div celle-ci (la div) ne prend évidemment pas la taille de l'image en background.
Mais un grand merci pour le conseil viewport : j'ai mis dans la div : min-height:100vh et cela semble parfaitement fonctionner ! .
Il faut que je vérifie sous différentes configurations.