長寬比全屏圖像

Question

如何顯示填充整個屏幕（HTML或Javascript）的圖像，但沒有拉伸和變形，它保持縱橫比。

所以將居中，並且：

具有100％的高度，並且x％的寬度（其中 「x」 小於或等於100％）

或

有Y％高度和100％寬度（其中「y」小於或等於100％）

對於類似於全屏圖像查看器web應用的東西。

Answer 1

使用此：

body, html { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
div { 
    height: 100%; 
} 

img { 
max-width: 100%; 
max-height: 100%; 
} 

JSFIDDLE HERE

Answer 2

只需設置其中一個寬度或高度，其他將根據圖像邊比例自動設置。

Answer 3

html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.container { 
 
    max-width: 100%; 
 
} 
 
.img-class { 
 
    max-width: 100%; 
 
    height: auto; 
 
    position: relative; 
 
}

您可以設置div容器通過使用位置絕對的，如果需要，可以準確地定位在屏幕上。