如何防止我的背景封面图像在调整大小(响应式)时被切断?

Question

为我的学校项目创建一个小的互动"游戏"。背景图像是办公室的图像。它将在该图像中具有一些可单击的内容。例如，有一台计算机站在某个地方，所以我可以点击屏幕的那部分，它就会做一些事情。

我目前已经在页面上设置了背景，并在将其设置为cover并将其对齐后很好地适合屏幕center，问题只是在将其调整为少量大小后，左右大小开始切断。我需要使网站响应一些较小的屏幕。

如何避免图像被切断，并使其完美调整大小？ 添加max-width/height似乎不起作用，因为它会使页面变白。

.HTML

<div id="pagina2">
<div id="pagina2Background">
<a class="computer">
<div class="computerHover">
</div>
</a>
<a class="bril">
<div class="brilHover"></div>
</a>
<a class="bord">
<div class="bordHover"></div>
</a>
</div>
</div>

.CSS

#pagina2 {
width: 100%;
height: 100%; 
}
#pagina2Background {
width: 100vw;
height: 100vh;
background-image: url(../img/bureau.png);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}

Answer 1

您可以使用按百分比填充底部(或顶部(技巧来保持恒定的纵横比。例如，如果图像的大小：宽度/高度 = 4/3，则可以使用底部填充为 75%。请参阅下面的代码：

div {
width: 100px;
height: 0;
background-image: url('https://api.time.com/wp-content/uploads/2019/12/CatFilterReaction.jpg?w=600&quality=85');
background-repeat: no-repeat;
background-size: 100% 100%;
padding-bottom: 40%;
}