缩放div时如何保持div为父容器的100%？

Question

我正在尝试使用 div 构建一个类似画布的元素。

我有一个充当画布的 div 元素，该 div 元素可以缩放和平移。此 div.canvas 元素放置在容器内。我使用 css 变换缩放和平移来实现缩放和平移效果。

example （黑色是容器，绿色是div.canvas，内部红色方块是内部元素）

每次，我缩小div（充当画布）宽度和高度也会缩小，并且不是100％容器。

这里有一个 codesandbox 可以复制问题。（使用+、-键进行缩放）

// import "./styles.css";

let scale = 1;

window.addEventListener("keydown", (e) => {
  if (e.key === "+") {
    scale += 0.2;
  } else if (e.key === "-") {
    scale -= 0.2;
  }
  // console.log("scale: ", scale);
  document.getElementById("canvas").style.transform = `scale(${scale})`;
});

body {
  font-family: sans-serif;
  height: 100vh;
  width: 100%;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background-color: brown;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
}

.element {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div class="canvas" id="canvas">
        <div class="element"></div>
      </div>
    </div>

    <!-- <script src="./index.mjs" type="module"></script> -->
  </body>
</html>

您会注意到，每次按

键缩小时，div.canvas 也会变小。

如何确保每次缩放时，它只影响 div.canvas 内的内容而不是 div 本身，或者如何确保 div.canvas 始终是父容器的 100%？

Answer 1

您应该更改

canvas

的子元素的比例，而不是

canvas

本身：

// import "./styles.css";

let scale = 1;

window.addEventListener("keydown", (e) => {
  if (e.key === "+") {
    scale += 0.2;
  } else if (e.key === "-") {
    scale -= 0.2;
  }
  // console.log("scale: ", scale);
  const canvas = document.getElementById("canvas");
  const children = canvas.children
  for(const child of children){
    child.style.transform = `scale(${scale})`;
  }
});

body {
  font-family: sans-serif;
  height: 100vh;
  width: 100%;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background-color: brown;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: green;
}

.element {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript Sandbox</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div id="app">
      <div class="canvas" id="canvas">
        <div class="element"></div>
      </div>
    </div>

    <!-- <script src="./index.mjs" type="module"></script> -->
  </body>
</html>

缩放div时如何保持div为父容器的100%？

问题描述投票：0回答：1

1个回答

最新问题

缩放div时如何保持div为父容器的100%？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1