如何实现Canvas宽度100%且不超出视口？兼容层叠布局

我用CSS的width: 100%;拉伸Canvas时，它能自动维持宽高比，但我希望当窗口宽度过大导致Canvas高度超出视口时停止拉伸。有没有合适的CSS属性可以实现这个需求？我试过object-fit但没达到预期效果。另外，我有两个层叠的Canvas，解决方案不能破坏它们相对于position: relative;父容器的绝对定位。页面顶部还有占用空间的控制栏，Canvas的初始尺寸由JavaScript设置，以下是简化代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Canvas Demo</title>
    <style>
        canvas{
            width: 100%;
            border: 1px solid black;
            background-color: #eee;
        }
        #controls{ 
            border: 1px solid black;
            padding: 50px 20px;
        }
    </style>
    <script>
        function init(){
            let canvas1 = document.getElementById("canvas_environment");
            canvas1.width = 1200;
            canvas1.height = 1000;
            let canvas2 = document.getElementById("canvas_agents");
            canvas2.width = 1200;
            canvas2.height = 1000;
        }
    </script>
</head>
<body onload="init()">
    <!-- Control bar on top -->
    <div id="controls">
        <button>GO</button>
    </div>
    <!-- Two canvases overlaid to avoid redrawing the environment every frame -->
    <div style="position: relative;">
        <canvas id="canvas_environment"
            style="position: absolute; left: 0; top: 0; z-index: 0;">
        </canvas>
        <canvas id="canvas_agents"
          style="position: absolute; left: 0; top: 0; z-index: 1;">
        </canvas>
    </div>
</body>
</html>

可以通过给Canvas的父容器设置最大高度限制，结合max-width和height: auto实现需求，同时完全保留两个Canvas的绝对定位布局。具体调整如下：

1. 给相对定位父容器添加样式 #

给父容器设置max-height为视口高度减去控制栏的实际高度（用calc()动态计算），同时让容器自适应宽度并居中：

.canvas-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  max-height: calc(100vh - 122px); /* 122px是控制栏总高度：上下padding(50+50)+border(1+1)+内容高度，可根据实际调整 */
  margin: 0 auto;
}

2. 调整Canvas的样式 #

替换原有width: 100%;，改用max-width和max-height限制缩放范围，同时保留绝对定位：

canvas {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  border: 1px solid black;
  background-color: #eee;
}

3. 完整修改后的代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Canvas Demo</title>
    <style>
        canvas{
            max-width: 100%;
            max-height: 100%;
            height: auto;
            border: 1px solid black;
            background-color: #eee;
        }
        #controls{ 
            border: 1px solid black;
            padding: 50px 20px;
        }
        .canvas-container {
            position: relative;
            width: 100%;
            max-width: 100%;
            max-height: calc(100vh - 122px);
            margin: 0 auto;
        }
    </style>
    <script>
        function init(){
            let canvas1 = document.getElementById("canvas_environment");
            canvas1.width = 1200;
            canvas1.height = 1000;
            let canvas2 = document.getElementById("canvas_agents");
            canvas2.width = 1200;
            canvas2.height = 1000;
        }
    </script>
</head>
<body onload="init()">
    <!-- Control bar on top -->
    <div id="controls">
        <button>GO</button>
    </div>
    <!-- Two canvases overlaid to avoid redrawing the environment every frame -->
    <div class="canvas-container">
        <canvas id="canvas_environment"
            style="position: absolute; left: 0; top: 0; z-index: 0;">
        </canvas>
        <canvas id="canvas_agents"
          style="position: absolute; left: 0; top: 0; z-index: 1;">
        </canvas>
    </div>
</body>
</html>

原理说明 #

• 父容器的max-height限制了Canvas能占用的最大垂直空间，确保不会超出视口剩余区域（减去控制栏高度）。
• Canvas的max-width:100%让它在宽度足够时占满容器，max-height:100%则在高度即将超出时自动限制缩放比例，height:auto保证宽高比始终和Canvas初始像素比例一致。
• 两个Canvas的绝对定位完全保留，依然相对于父容器层叠，不会破坏原有布局。

内容的提问来源于stack exchange，提问作者Jonathan Cakes