使用相同的比例更改 parent 大小，并使用 css/js 使用相同的位置和比例调整所有 children 的大小

Question

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

这个元素可以有一些 children 大小随机（但总是小于 parent）在随机位置。

如何使内部具有 children 的具有相同纵横比的可调整大小 div 最重要的是如何调整 children 的大小取决于 parent 并保持使用 css/js?

在同一地点的 childrens 个职位

孩子的位置是绝对的。

Answer 1

对这里有帮助的CSS是aspect-ratio。具体来说，如果 max-aspect-ratio 为 1/2，则可以根据 vw 设置宽度和高度，如果不是，则根据 vh.

child 元素的位置和大小可以设置为 parent 的 %s，因此无论大小如何变化它们都保持正确。

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

* {
  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>

使用相同的比例更改 parent 大小，并使用 css/js 使用相同的位置和比例调整所有 children 的大小

Change parent size with this same ratio and resize all children with this same positions and ratio using css/js

javascript

css

responsive-design