Question

我有一个需要填充的网格，其中包含2个滑块和一个如下所示的画布：

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

现在，出现以下两个问题：

如何确保两个滑块始终与其所在的网格项始终具有相同的高度（或宽度，因为它们被旋转了）。目标是在调整网格大小时使其尺寸自动增大。
如何确保画布填充其父对象的整个网格项目区域，以便其也可以缩放？

下面的屏幕快照希望可以清楚地说明我要实现的目标。最好使用CSS而不是Javascript完成此操作。如果它仅适用于Javascript，那就可以了。

编辑：

好吧，忘了画布。只需将width的{{1}}和height设置为.canvas即可填充父网格项目。由于对CSS的经验不足，这对我来说并不明显。

但是，由于滑块被旋转，因此相同的方法不适用于滑块。尝试将导致以下结果：

有人知道如何调整滑块大小吗？

画布/滑块应填充父网格项目

0 个答案: