css 将画布拉伸100%宽度，但包含在窗口中

jvidinwx 于 2023-03-20 发布在其他

关注(0)|答案(1)|浏览(123)

我有一个画布，我用CSS使用width: 100%;拉伸。它的工作很大，以保持纵横比，因为高度自动调整。但我希望它停止增长时，窗口的大小是如此之宽，画布的高度将低于折叠。有一个简单的CSS属性值为这一点？
我原以为object-fit属性可以做到这一点，但我想我还是不明白。
还请注意，我有2个画布分层在对方的顶部，所以解决方案不应该与他们的绝对定位他们的'位置混乱：relative;“父容器。
编辑：这是我的设置的简化版本。画布的大小是用JavaScript初始化的，然后CSS的width属性将其拉伸到页面的整个宽度。请注意我放在顶部的控制栏，因为它也会占用空间。

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

css

来源：https://stackoverflow.com/questions/75780249/stretch-canvas-100-width-but-contain-in-window

1条答案

按热度按时间

g9icjywg1#

为了考虑画布上方的按钮空间，这个代码片段将按钮和画布都放入一个容器中，然后使用网格将容器划分开，这样画布就可以占用剩余的垂直空间。
每个画布的最大宽度和高度都是100%（这将等于单元格的宽度和高度），然后使用对象适配来确保它进行适当的调整。

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Canvas Demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <style>
    * {
      margin: 0;
      box-sizing: border-box;
    }
    
    canvas {
      max-width: 100%;
      max-height: 100%;
      border: 1px solid black;
      background-color: cyan;
    }
    
    #controls {
      border: 1px solid black;
      padding: 50px 20px;
    }
    
    .container {
      display: grid;
      grid-template-rows: auto 1fr;
      grid-template-columns: 1fr;
      width: 100vw;
      height: 100vh;
    }
  </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()">
  <div class="container">
    <!-- 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="display: none; position: absolute; left: 0; top: 0; z-index: 1;">
        </canvas>

    </div>
  </div>

</body>

</html>

赞(0）回复(0）举报 2023-03-20

我来回答

css 将画布拉伸100%宽度，但包含在窗口中

1条答案

相关问题

热门标签

最新问答