如何用CSS定位React中Spline生成的Canvas并实现响应式？

要实现Spline Canvas的响应式布局且保持正确宽高比、避免内容截断，核心是通过容器的padding-top固定比例，配合canvas的自适应样式来实现，具体方案如下：

1. 给父容器设置响应式框架 #

给.wrapper和.spline容器添加样式，用padding-top维持场景的原始宽高比（比如16:9比例对应padding-top: 56.25%，4:3对应75%，需根据你的Spline场景原始尺寸计算）：

.wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* 替换为你的场景宽高比，例如16:9 → 1080/1920*100% = 56.25% */
  padding-top: 56.25%;
}

.spline {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

2. 设置Canvas自适应样式 #

利用你已指定的.canvas类，强制canvas自适应容器且保持原始比例：

.canvas {
  width: 100% !important;
  height: 100% !important;
  /* 完整显示内容，不拉伸变形，可能留空白 */
  object-fit: contain;
  /* 若需填充容器，可改用object-fit: cover（会裁剪边缘），按需选择 */
}

3. 文本层叠加定位（可选） #

如果需要让文本层叠加在3D场景上，给.text-div添加绝对定位：

.text-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* 自定义文本样式 */
}

补充提示 #

• 若不清楚Spline场景的原始宽高比，可在Spline编辑器中查看场景尺寸，用「高度/宽度*100%」计算出padding-top的值。
• 不要直接给canvas设置固定宽高，否则会破坏响应式效果；object-fit属性是控制canvas显示方式的关键。

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