Как сделать так, чтобы один элемент HTML динамически изменял размеры пропорционально другому элементу?

Question

Я довольно новичок в CSS и пытаюсь создать динамический макет, который ускользает от меня. Я также нашел ответ, который трудно найти; кажется, что большинство ответов сосредоточены на изменении размеров изображений, которые я уже выяснил.

У меня есть изображение, нарисованное на холсте, с элементом ползунка, который изменяет размеры изображения / холста с помощью JavaScript. Эта часть завершена - не нужно помогать с этим.

Мне нужны четыре кнопки, две с левой стороны изображения и две сверху, которые сохраняют свой относительный размер как половину изображения по мере его изменения. То есть, когда изображение становится больше, я хочу, чтобы две левые боковые кнопки расширялись, чтобы каждая из них продолжала занимать половину высоты изображения (минус пустое пространство между ними), и аналогично двум верхним кнопкам.

Я включил диаграмму ниже того, что я пытаюсь достичь.

Есть ли способ чистого CSS сделать это? Я бы предпочел не делать активного изменения размера с помощью javascript, но если это единственный способ, я бы тоже хотел это знать. Спасибо!

Желаемый макет с небольшим размером изображения:

Желаемый макет с большим размером изображения:

(изменение расстояния между кнопками не является преднамеренным, и предполагается, что оно дважды говорит "кнопка 3" и "кнопка 4", а не "кнопка 3")

Answer 1

Вы можете сделать это с помощью CSS Grid:

.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>