CSS - 画像フルスクリーンですが、アスペクト比を維持します

Question

画像を全画面に塗りつぶすにはどうすればいいですか（画面の下にあるものが画面全体に表示されるページのヘッダーと考えてください）そのアスペクト比は、幅の上にうなりすぎるか、高さにオーバースプライスするかのいずれかです。

私はそれが可能だろうと思った：

<img class="w3-image" src="./images/img1.jpg" style="min-width:100vw; max-height:100vh; background-position: center; background-repeat: no-repeat;" /> 

しかし、それは動作しません。アスペクト比が失敗します。

Answer 1

background-size: cover;とheight: 100vhの要素で、代わりに要素の背景として挿入します。 `;カバーを：

Answer 2

基本的には

background-position: center center; 
background-repeat: no-repeat; 
background-size: cover; 
min-height: 100vh; 
min-width: 100vh; 

http://codepen.io/powaznypowazny/pen/apeVXg

はそれが役に立てば幸い:)