如何使元素在各个方向上均匀溢出？

Question

我在这个问题上遇到了很多麻烦。我正在尝试创建一个类似 Canva 的绘图表，可以放大和缩小。问题是，当我放大时，纸张会放大，但会根据页面尺寸而扭曲。相反，我希望它根据其大小在所有方向上均匀地溢出，因此它保持在页面的中心，就像在 Canva 应用程序中一样。如何使用 CSS 实现此功能？

我尝试了我所知道的关于 CSS 的一切（不是太多），但我找不到任何解决方案。有人可以给我举个小例子吗？

Answer 1

不确定使用纯CSS（即滚动捕捉）是否可以实现这一点，但是使用一行JavaSCript的简单方法是使用

scrollIntoView

，并将

block

和

inline

属性设置为

"center"

document.querySelector("#area").scrollIntoView({
  block: 'center',
  inline: 'center',
});

#viewport {
  height: 200px;
  background: red;
  overflow: scroll;
  position: relative;
  container-type: size;
}

#area {
  background: blue;
  width: 180cqw;
  height: 180cqh;
  display: flex;
}

#canvas {
  margin: auto;
  width: 50cqw;
  height: 50cqh;
  background: #fff;
}

<div id="viewport">
  <div id="area">
    <div id="canvas">Canvas</div>
  </div>
</div>

对于创建缩放应用程序（如 Photoshop）的正确方法，您可能感兴趣：创建可缩放区域（如 Photoshop）