纵横比全屏图像答案

【问题标题】：Aspect ratio full screen image纵横比全屏图像
【发布时间】：2020-02-02 12:21:36
【问题描述】：

我怎样才能显示一个填满整个屏幕（HTML 或 Javascript）但不拉伸和扭曲，保持纵横比的图像。

所以它将居中，并且：

具有 100% 的高度和 x% 的宽度（其中“x”小于或等于 100%）

或

高度为 y%，宽度为 100%（其中“y”小于或等于 100%）

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

【问题讨论】：

【解决方案1】：

使用这个：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：