时间戳

首页 > 解决方案 > 如何调整容器的大小以适合使用“object-fit：contain”的画布

css - 如何调整容器的大小以适合使用“object-fit：contain”的画布

问题描述

我有一个画布，用于object-fit: contain在不改变纵横比的情况下使内容尽可能大。但是，我想在画布之上和相对于画布显示其他元素。我计划通过将画布和其他元素放入position: relative容器并提供其他元素来做到这一点position: absolute。但是，这会导致画布显示不大于默认宽度/高度（通常小于视口）。我还尝试为容器提供 100% 的宽度和高度，但其他元素不再与画布内容相关。下面是一个例子：

const canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 100;
canvas.height = 100;
ctx.beginPath();
ctx.rect(0,0,100,100);
ctx.fillStyle = "red";
ctx.fill();
* {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#container {
  position: relative;
  width: 100%;
  height: 100%;
}

#canvas {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

p {
  border: 2px solid black;
  position: absolute;
}
<body>
  <div id="container">
    <p>Example text</p>
    <canvas id="canvas"></canvas>
  </div>
 </body>

标签： csscanvasabsoluteobject-fit

解决方案

推荐阅读