javascript - 有没有办法强制画布只用高度而不是宽度重新缩放？

Question

我正在建立一个网站，其中在可以调整大小的 div 内的画布上绘制图表。每当我调整 div 的大小时，画布也会调整大小以适应 div 的整个宽度，但是这会在上方和下方留下很多空白空间，看起来并不好看，而是画布适合整个高度，然后剪辑超出 div 的末端这意味着用户可以根据自己的喜好缩放图表，而上下没有空白。

有没有办法强制画布随高度缩放？

以下是构成图表的 HTML 元素：

<div class='graphHolder' id='graphHolder1'>
    <div class='graph' id='graph1'>

        <canvas class='chart' id='chart' height='100%'></canvas>
                
    </div>
</div>

以下是这些元素的 CSS：

.graphHolder {
    width: 300px;
    height: 150px;
    position: absolute;
    top: 50px;
    left: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.3);
    overflow: hidden;
    resize: both;
    border: 1px solid #d62828;
    border-radius: 10px;
}

.graph{
    width: -moz-calc(100% - 5px);
    width: -webkit-calc(100% - 5px);
    width: calc(100% - 5px);
    height: -moz-calc(100% - 5px);
    height: -webkit-calc(100% - 5px);
    height: calc(100% - 5px);
    background: ;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chart {
    width: calc(100% - 5px);
    height: calc(100% - 5px);
    background: white;
    border: ;
}

标签： javascripthtmlcsscanvas