如何缩放适合高度固定大小的孩子在屏幕css只允许javascript

Question

我有两个固定大小的子元素:

<div class="parent">
  <div class="static_child">
  </div>
  <div class="static_child">
  </div>
</div>
.parent {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
}
.static_child {
  border: 1px solid red;
  width: 600px;
  height: 200px;
}

我需要让这个孩子响应，所以他们适合/填充屏幕。

我不能改变它们的固定大小。

我需要有两个孩子出现在屏幕上，按比例缩小。他们应该通过适当的增长来应对更大的屏幕。

http://codepen.io/eguneys/pen/zGbqqB

Answer 1

我不确定我是否正确阅读了您的问题，但您可以将width: 600px更改为width: 100%。这样，您的块的宽度将拉伸以适应不同的屏幕尺寸。然而，同样的情况似乎并不适用于身高。