CSS - Bild Vollbild, aber wird beibehalten Seitenverhältnis

Question

Wie bekomme ich ein Bild, um den Vollbild zu füllen (beachten Sie, es gibt Sachen darunter - denken Sie an es als Überschrift in einer Seite, die den gesamten Bildschirm füllt) aber unterhält sein Seitenverhältnis, entweder überspannt auf der Breite oder overpilling auf der Höhe.

Ich dachte, es wäre:

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

Aber das funktioniert nicht. Das Seitenverhältnis schlägt fehl.

Answer 1

Fügen Sie es stattdessen als Hintergrund für ein Element ein, mit background-size: cover; und das Element mit height: 100vh.

Answer 2

Grundsätzlich können Sie verwenden

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

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

Hoffe, es hilft :)