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

Question

我是CSS的新手级别,我正在尝试创建一个让我不知所措的动态布局.我也找到了难以寻找的答案; 大多数答案似乎都集中在调整图像大小,我已经想到了.

我在画布上绘制了一个图像,其中一个滑块元素使用javascript调整图像/画布的大小.那部分是完整的 - 不需要帮助.

我想要的是四个按钮,两个位于图像的左侧,两个位于顶部,当图像调整大小时,它们的相对大小保持为图像的一半.也就是说,随着图像变大,我希望两个左侧按钮扩展,这样它们每个都继续占据图像高度的一半(减去它们之间的空白区域),类似于前两个按钮.

我已经在下面列出了我正在努力实现的目标.

是否有纯CSS方式来做到这一点？我不想用javascript进行主动调整大小,但如果这是唯一的方法,我也想知道.谢谢!

图像设置为小的所需布局:

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

(按钮之间间距的变化不是故意的,它应该说"按钮3"和"按钮4",而不是"按钮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。第一行和第一列的固定大小为 50px，但第二行和第三列均匀地划分了剩余的可用空间。图像遍布东南方的四个牢房。