如何使一个HTML元素与另一元素成比例地动态调整大小？

Question

我对CSS还是一个新手级别，我正在尝试创建一种使我难以理解的动态布局。我也很难找到答案。大多数答案似乎都集中在调整图像的大小上，我已经弄清楚了。

我有一个在画布上绘制的图像，带有一个可使用javascript调整图像/画布大小的滑块元素。该部分已经完成-不需要帮助。

我想要的是四个按钮，两个位于图像的左侧，两个位于顶部，当图像调整大小时，它们的相对大小保持为图像的一半。也就是说，随着图像变大，我希望两个左侧按钮展开，以便它们各自继续占据图像高度的一半（减去它们之间的空白），并与顶部的两个按钮类似。

我在下面提供了要完成的工作的图表。

是否有一种纯CSS的方式来做到这一点？我不希望使用javascript来进行主动调整大小，但是如果那是唯一的方法，我也想知道。谢谢！

图像设置较小的所需布局：

图像设置较大的所需布局：

（按钮之间的间距变化不是故意的，应该说“按钮3”和“按钮4”，而不是两次“按钮3”）

Answer 1

您可以使用flexbox来执行此操作，并依靠它的默认默认行为。

这是一个简化的示例：

* {
  box-sizing: border-box;
}

.container {
  border: 1px solid red;
  display: inline-flex;
  flex-direction: column;
}

.btn1 {
  min-height: 50px;
  margin-left: 58px;
}

.btn1 button {
  border: 0;
  background: blue;
  color: #fff;
  width: 50%;
  height: 50px;
  border: 1px solid;
}

.btn2 {
  min-width: 50px;
}

.btn2 button {
  border: 0;
  background: blue;
  color: #fff;
  height: 50%;
  width: 100%;
  border: 1px solid;
}

.sub {
  display: flex;
  flex-direction: row;
}

.resize {
  min-height: 100px;
  min-width: 100px;
  resize: both;
  overflow: auto;
  border: 1px solid green;
}

<div class="container">
  <div class="btn1"><button>aa</button><button>bb</button></div>
  <div class="sub">
    <div class="btn2"><button>aa</button><button>bb</button></div>
    <div class="resize"></div>
  </div>
</div>

Answer 2

您可以使用CSS网格进行此操作：

.container {
  display: inline-grid;
  grid-template:
    " .    btn3   btn4 " 50px
    "btn1 resize resize" 1fr
    "btn2 resize resize" 1fr
    /50px  1fr    1fr;
  grid-gap: 5px;
}

.resize { grid-area: resize; }
.btn1 { grid-area: btn1; }
.btn2 { grid-area: btn2; }
.btn3 { grid-area: btn3; }
.btn4 { grid-area: btn4; }

/* everything below this point is incidental */

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

button {
  border-radius: 4px;
  background: navy;
  color: white;
  border: 2px solid black;
}

.resize {
  min-height: 150px;
  min-width: 150px;
  resize: both;
  overflow: auto;
  background: black;
  color: white;
}

.vertical {
  /*writing-mode: sideways-lr; /* not yet well-supported */
}

<div class="container">
  <button class="btn1 vertical">Button 1</button>
  <button class="btn2 vertical">Button 2</button>
  <button class="btn3">Button 3</button>
  <button class="btn4">Button 3?</button>
  <div class="resize"></div>
</div>

我们使用grid-template定义了一个三行三列的网格。第一行和第一列的设置大小为50px，但是第二和第三列将剩余的可用空间平均分配。该图像分布在四个东南单元。