使用相同的比例更改父级大小，并使用 css/js 调整所有具有相同位置和比例的子级大小答案

【问题标题】：Change parent size with this same ratio and resize all children with this same positions and ratio using css/js使用相同的比例更改父级大小，并使用 css/js 调整所有具有相同位置和比例的子级大小
【发布时间】：2021-04-08 08:44:17
【问题描述】：

我有父元素，父元素应该是响应式的，并且应该改变大小以适应具有相同比例纵横比的屏幕，例如下面的屏幕（灰色 - 屏幕，红色 - 父元素）

这个元素可以有一些随机位置的子元素（但总是小于父元素）。

如何制作具有相同纵横比的可调整大小的 div，其中包含子项，最重要的是如何调整子项的大小取决于具有此比例的父项，并使用 css/js 将子项的位置保持在同一位置？

孩子的位置是绝对的。

【问题讨论】：

与其担心实际尺寸，我会更多地考虑百分比。子元素 1 是 100 宽，是父元素的 10%。 400 高度，即父级的 20%。它与父级的位置应该是 x% 上下。如果你这样做，它自然会很容易扩展。
希望您至少尝试自己编写代码。我建议你做一些additional research，通过谷歌或搜索SO，尝试一下。如果您仍然遇到问题，请返回您的代码并解释您尝试过的操作。

标签： javascript css responsive-design

【解决方案1】：

在这里有帮助的 CSS 是宽高比。具体来说，如果最大纵横比为 1/2，则可以根据 vw 设置宽度和高度，否则可以根据 vh 设置。

子元素的位置和大小可以设置为父元素的 %s，因此无论大小发生什么变化，它们都保持正确。

这是一个只有一个孩子的例子，但很容易扩展以容纳更多。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  background-color: gray;
}

#parent {
  height: 100vh;
  width: 50vh;
  background-color: red;
  top: 0;
  left: calc(50vw - 25vh);
  position: relative;
}

.child {
  border-style: solid;
  border-color: yellow;
  border-width: 1vh;
  position: absolute;
  width: 50px;
  height: 50px;
}

#child1 {
  width: 10%;
  height: 20%;
  top: 10%;
  left: 10%;
}

@media (max-aspect-ratio: 1/2) {
  #parent {
    height: 200vw;
    width: 100vw;
    top: calc(50vh - 100vw);
    left: 0px;    
  }
  .child {
    border-width: 1vw;
  }
}

<div id="parent">
  <div id="child1" class="child"></div>
</div>

【讨论】：