javascript - 如何在屏幕中缩放适合高度固定大小的子级 css 仅允许 javascript

Question

我有两个固定尺寸的 child :

<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;
}

我需要让这些 child 响应，以便他们适合/填满屏幕。

我无法更改它们的固定大小。

我需要通过缩小来让两个 child 都出现在屏幕上。 他们应该通过适当的成长来应对更大的屏幕。

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

Answer 1

我不确定我是否正确阅读了您的问题，但您可以将 width: 600px 更改为 width: 100%。这样，您的 block 的宽度将拉伸(stretch)以适应各种屏幕尺寸。不过，这似乎不适用于高度。希望这对您有所帮助。