如何根据用户的视口增加图像宽度和高度，同时保持纵横比不变？

Question

我正在制作一个网站，除了可点击的元素之外，该网站基本上只是一个巨大的图像，我想知道如何根据用户的屏幕尺寸增加图像大小，这样图像就不会'看起来不会拉伸，但仍适合整个屏幕。这是我第一次使用视口，所以我不能确切地说我理解得很好。这里有一些代码可以提供帮助：

<div class="Image">
          <img src="Background.png"/> 
        </div>

.Image {
    width: 100vw;
    height:  100vh;
    object-fit: contain;
}

第一部分写于index.html，第二部分写于style.css。仅供参考，html 部分是在 <body>.

中编写的

Answer 1

<div class="fullscreen" /> 

.fullscreen {
    position: fixed;
    top: 0;
    left: 0;

    background-image: url(Background.png);
    background-size: cover;
    background-position: center;
    width: 100vw;
    height:  100vh;
}

Answer 2

你必须申请

  width: 100vw;
  height: 100vh;
  object-fit: contain;

直接img，可以直接使用idclass或img，但不推荐使用最后一种方法，因为它适用于所有img文档中的标签

我已经使用 red background 来显示图像覆盖了多少区域，但是 object-fit: contain; 所以图像比例保持不变
Read this to know more about object-fit

使用

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

删除任何不必要的 horizontal 滚动条，因为标签有一些默认的 margin 和 padding 。所以，这里使用了 body 标签

.Image {
  width: 100vw;
  height: 100vh;
  object-fit: contain;/*Can be cover , fill , none...*/
  background-color: red;
}

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

<div>
  <img src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="Image" />
</div>

如何根据用户的视口增加图像宽度和高度，同时保持纵横比不变？

How do I increase my image width and height according to the viewport of the user while keeping the aspect ratio same?

html

css

viewport