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

希望它能幫助:)