Remplir et redimensionner l'image à l'écran dimension

Question

J'essaie de remplir un écran avec une image et de ne pas déformer l'image. Je voudrais le faire non comme une image de fond. Je voudrais le faire en utilisant css - Je suis conscient que c'est possible mais je ne trouve pas la bonne combinaison de code.

Voici un exemple de ce que je veux que les images à faire:

http://kentmatheson.com/index-NEWNEW1.html

Vous pouvez voir que l'image (s) remplir l'espace de l'écran à la taille, soit la plus étroite ou plus large dimension en fonction sur la largeur de l'écran et ne déformez pas l'image. C'est génial mais ça ne marchera pas pour ma configuration actuelle à cause des conflits css img.

J'ai une configuration que je veux utiliser, ici:

http://kentmatheson.com/index-NEWNEW2.html

mais je suis incapable de trouver la bonne combinaison de code CSS pour le faire répondre que je veux. Si je remplis à la hauteur de l'image déforme, si je remplis à la largeur de l'image ne remplit pas l'écran ...

Merci pour toute aide.

Answer 1

J'ai finalement réussi à le faire fonctionner.
Voilà, c'est parti!
Bonne chance!

---

HTML

<img id="theimg" src="http://interfacelift.com/wallpaper/D7c82ceb/04087_riomaggioreatsunset_3840x2160.jpg"> 

---

CSS

#theimg { 
    width: 100%; 
    height: 100%!important; 
    object-fit: cover; 
    object-position: right; 
}