我正在尝试使样条线制作的 3D 组件具有响应性？如何通过CSS定位画布？

Question

我正在制作一个 3D 网站，该网站使用 Spline 和 ReactJS 制作的组件。我遇到了一个问题，该问题不允许我使组件具有响应能力。当您检查代码时，我注意到画布标签是由样条线生成的。如何通过 css 定位该画布标签，以便使其具有响应能力。这是我正在使用的代码

const Header = () => (
  <div className="wrapper">
                 <Suspense fallback={<div>Loading...</div>}>
                <Spline className="spline" canvasClassName='canvas'  scene="https://prod.spline.design/mBHAychRuVpOVVWU/scene.splinecode"/>
                </Suspense>
                <div className="text-div">
                  <h5 className="head-text">We <span className='typed-text'><Typed
                      strings={[
                        'design to inspire.',
                        'build to capture.'
                      ]}
                      typeSpeed={120}
                      backDelay={160}
                      loop/></span></h5>
                </div> 
  </div>
);

检查后的代码如下

我尝试设计父 div 的样式。然而，每次我尝试这样做时，画布的纵横比都会发生变化，使高度比宽度长，这使得一些内容消失

Answer 1

你找到解决办法了吗？有同样的问题