宽高比全屏图像

Question

如何显示填满整个屏幕的图像（HTML或Javascript），但不会拉伸并使其全部失真，它会保持纵横比。

所以它将集中在一起：

具有100％高度和x％宽度（其中＆＃34; x＆＃34;小于或等于100％）

或

有y％高度和100％宽度（其中＆＃34; y＆＃34;小于或等于100％）

像全屏图像查看器网络应用程序。

Answer 1

只需设置一个宽度或高度，其他将根据图像边比例自动设置。

Answer 2

使用此：

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

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

JSFIDDLE HERE

Answer 3

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

如果需要，您可以使用绝对位置将容器div设置为准确定位在屏幕上。