フルブラウザウィンドウで画像を表示しますが、画像が大きすぎる場合は縮小します

Question

ブラウザウィンドウ全体の中央に画像を表示したいとします。しかし、いくつかの条件があります。イメージのサイズがブラウザのクライアント領域に収まる場合は、元のサイズで表示します。イメージがブラウザのクライアントウィンドウよりも大きい場合は、イメージを縮小します。最後に、ユーザーがブラウザのサイズを変更した場合、ブラウザウィンドウが画像サイズを超えた場合、画像は縮小され（大きすぎると）縮小されるか、元のサイズより大きくなりません。

私はjQueryでこれをすべて行うことができますが、cssだけで行うことができるのだろうかと思っていますか？

EDIT：

私が持っている最も近いがこれです：

https://jsfiddle.net/Deepview/o5vgo6du/

HTML

<div class="outerCont"> <img src="http://www.wonderslist.com/wp-content/uploads/2015/10/Doutzen-Kroes-Most-Beautiful-Dutch-Woman.jpg" /> </div> 

CSS：

.outerCont { 
    position: relative; 
} 

img { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    max-width: 100%; 
    height: auto; 
    width: auto; 
} 

しかし、画像は垂直に中央にない。

Answer 1

あなたは何をしたいのですか？ background-size:coverを使用すると、常にdiv全体が入力されます。

width: 100vw; 
    height: 100vh; 

https://jsfiddle.net/Deepview/o5vgo6du/3/

Answer 2

*{ 
 
margin:0; 
 
padding:0; 
 
} 
 
.image{ 
 
background:url('https://www.aussiespecialist.com/content/asp/en_gb/sales-resources/image-and-video-galleries/jcr:content/mainParsys/hero/image.adapt.1663.medium.jpg') no-repeat; 
 
background-size:cover; 
 
width:100vw; 
 
height:100vh; 
 
}

<div class="image"></div>

は、外側のdivに以下を追加する必要がありました私が探しているものは提供していません。私が彼の解決策にしたコメントを見てください。