长宽比全屏图像

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容器通过使用位置绝对的，如果需要，可以准确地定位在屏幕上。