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

Question

我在 CSS 方面相当新手，我正在尝试创建一个让我难以理解的动态布局。我也发现很难找到答案；大多数答案似乎都集中在调整图像大小上，我已经想通了。

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

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

我在下面附上了一张我想要完成的图表。

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

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

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

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

Answer 1

您可以使用 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 定义了一个三行三列的网格。第一行和第一列的大小设置为 50 像素，但第二行和第三行平均分配剩余的可用空间。图像分布在东南部的四个单元格中。

Answer 2

您可以使用 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>