我尝试将画布缩放到特定的纵横比，以占用父容器中可用的尽可能多的空间。下面是CSS和HTML：

.grid-container {
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  background-color: white;
  gap: 1px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.grid-item {
  background-color: blue;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

#canvas1 {
  aspect-ratio: 4/3;
  object-fit: fit;
  background-color: red;
  margin: 0;
  padding: 0;
  /*
  what to set width and height to??
  */
}

<div class="grid-container">
  <div class="grid-item">
    <h1>header</h1>
  </div>
  <div class="grid-item">
    <canvas id="canvas1"></canvas>
  </div>
  <div class="grid-item">
    <h1>footer</h1>
  </div>
</div>

我尝试使用object-fit让画布占据整个可用空间，同时保持纵横比，但它没有。将width或height设置为100%似乎会忽略aspect-ratio。我试图在窗口调整大小时保持整个屏幕上，这就是为什么我扩大网格以占据整个空间的原因，但画布并没有像我希望的那样向上或向下缩放。
我试过各种方法，但都没有成功。任何帮助将不胜感激。谢谢！
这是小提琴：https://jsfiddle.net/csells/53bgLw1z/25/