HTML画布保持长宽比，并尽可能大，因为它可以在父元素内?(CSS)

Question

我正在尝试将画布缩放到特定的宽高比，该宽高比占用父容器中可用的尽可能多的空间。下面是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/

Answer 1

设置

width: 100%;
height: auto;

对我来说很有效，它也保持了宽高比。