Холст / ползунок должны заполнить родительский элемент сетки - PullRequest
1 голос
/ 04 апреля 2019

Я получил сетку, которую мне нужно заполнить двумя ползунками и холстом, который выглядит следующим образом:

<!DOCTYPE html>
<html>
  <style>
    *{
      box-sizing: border-box;
      padding: 0;
      margin: 0;
      font-family: Arial, Calibri;
    }
    .grid {
      display: grid;
      grid-template-columns: 5fr 30px 1fr 1fr 1fr 1fr 1fr 1fr 1fr 30px 5fr;
      grid-template-rows: 1fr 5fr 50px 1fr;
      grid-gap: 10px;
      width: 100vw;
      height: 100vh;
    }
    .canvas-container {
      grid-column: 3 / 10;
      grid-row: 2;
      border-style: solid;
      border-color: yellow;
    }
    .canvas {
      background-color: black;
    }
    .slider-container {
      grid-row: 2;
      display: flex;
      justify-content: center;
      align-items: center;
      border-style: solid;
      border-color: green;
    }
    .slider {
      appearance: none;
      outline: none;
      background: #d3d3d3;
      opacity: 0.7;
      transition: opacity .2s;
      -webkit-appearance: none;
      -webkit-transition: .2s;
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      transform: rotate(270deg);
    }
    .button-container {
      grid-row: 3;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .button {
      width: 80px;
      height: 30px;
      border: none;
      color: white;
      background-color: #4CAF50;
    }
    .button:hover {
      box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
    }
  </style>
  <body>
    <div class="grid">
      <div class="canvas-container"><canvas id="canvas" class="canvas" oncontextmenu="event.preventDefault()" /></div>
      <div class="slider-container" style="grid-column:  2;"><input type="range" class="slider" min="0" max="6" value="0" class="slider" id="start-layer-id"></div>
      <div class="slider-container" style="grid-column: 10;"><input type="range" class="slider" min="0" max="6" value="0" class="slider" id="end-layer-id"></div>
      <div class="button-container" style="grid-column:  3;"><input type="button" class="button" value="A"></div>
      <div class="button-container" style="grid-column:  4;"><input type="button" class="button" value="B"></div>
      <div class="button-container" style="grid-column:  5;"><input type="button" class="button" value="C"></div>
      <div class="button-container" style="grid-column:  6;"><input type="button" class="button" value="D"></div>
      <div class="button-container" style="grid-column:  7;"><input type="button" class="button" value="E"></div>
      <div class="button-container" style="grid-column:  8;"><input type="button" class="button" value="F"></div>
      <div class="button-container" style="grid-column:  9;"><input type="button" class="button" value="G"></div>
    </div>
  </body>
</html>

Теперь возникли следующие два вопроса:

  1. Как я могу убедиться, что два ползунка всегда имеют одинаковую высоту (или ширину, потому что они вращаются) с элементом сетки, в котором он находится. Цель состоит в том, чтобы он автоматически увеличивался в размере, если я изменяю размер своей сетки.
  2. Как я могу убедиться, что холст заполняет всю область элемента сетки своего родителя, чтобы он также масштабировался?

Надеюсь, что скриншот ниже показывает, чего я пытаюсь достичь. Предпочтительно это делается с использованием CSS, а не Javascript. Если это работает только с Javascript, пусть будет так.

enter image description here

EDIT:

Хорошо, забудь о холсте. Заполнить элемент родительской сетки можно просто, установив width и height из .canvas в 100%. Из-за моей неопытности с CSS это было не очевидно для меня.

Однако тот же подход не работает для ползунков, потому что они вращаются. Попытка этого приведет к следующему:

enter image description here

У кого-нибудь есть идеи как настроить размер слайдера?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...