Question

要创建一个网络游戏，我决定在正文中创建一个容器类。我打算使游戏中的所有相关元素都与此容器相关。

我的问题仅与容器类有关

默认情况下，我想以1920px x 1080px的网络分辨率，容器覆盖了整个身体

当用户更改宽度或高度或使用其他设备时，主体中的宽度和高度值会连续变化。我不希望在容器类中发生这种情况。

我将R = 1920/1080设为根比率

如果（主体的宽度/高度> R）容器高度达到100％的视图高度，则容器宽度将保持根比。

如果（车身的宽度/高度

我认为我需要Javascript才能解决此问题，但我不打算将它们与CSS结合使用。你能帮我吗？

Answer 1

您应该能够利用长宽比媒体查询来解决此问题，信息here 与此相关，您可以在没有JS的情况下利用最小/最大宽度和vh / vw单位获得所需的缩放比例。

以下是使用calc和vw的宽高比示例。如果您还需要一个固有的div：

.ar {
  width: 80%;
  height: calc(80vw / (16 / 9));
  background-color: rebeccapurple;
}

<div class="ar"></div>

Answer 2

我不确定是否能解决您的问题，有什么可以帮助您的吗？

.game-container { 
height: 1080px;
position: relative;
width: 1920px;
}

.game-container .content {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}

<body>
  <div class="game-container">
    <div class="content"></div>
  </div>
</body>

在此示例中，您可以看到.game-container在body之后开始，并在其中设置了width: 1920px;和height: 1080px;。然后，您拥有.content和width: 100%，其中height: 100%和position: absolute与其父尺寸 .game-container 有关。在这种情况下，您将有一个固定大小的大盒子（1980，1080），并且一个孩子将反映相同的大小方向。

如果是这种情况，我希望我在您的道路上有所帮助。

有什么办法可以解决CSS，HTML中的宽度和高度问题？

2 个答案: