时间戳

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

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

问题描述

我正在制作一个网站，除了可点击的元素外，该网站基本上只是一个巨大的图像，我想知道如何根据用户的屏幕尺寸增加图像尺寸，以使图像看起来不会被拉伸，但是仍然适合整个屏幕。这是我第一次使用视口，所以我不能说我非常了解它。这里有一些代码可以帮助你：

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

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

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

标签： htmlcssviewport

解决方案

<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;
}

推荐阅读