javascript - 宽高比全屏图像

Question

我怎样才能显示一张填满整个屏幕(HTML 或 Javascript)的图像，但不会拉伸(stretch)和扭曲，它会保持宽高比。

所以它将居中并且要么:

高度为 100%，宽度为 x%(其中“x”小于或等于 100%)

或

具有 y% 高度和 100% 宽度(其中“y”小于或等于 100%)

对于像全屏图像查看器网络应用这样的东西。

Answer 1

使用这个:

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

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