增加html查看器模型的宽度和高度

Question

目前，当我将下面的代码上传到我的站点上的HTML组件时，内容被限制在一个小框中，但是html组件中有更多的空间来适应内容。

谁能让我知道什么，哪里写的代码，将是最感谢的！

<script type="module" 
        src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer 
       alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
       src="shared-assets/models/NeilArmstrong.glb" 
       ar ar-modes="webxr scene-viewer quick-look" 
       environment-image="shared-assets/environments/moon_1k.hdr" 
       poster="shared-assets/models/NeilArmstrong.webp" 
       seamless-poster shadow-intensity="1" camera-controls>
</model-viewer>

Answer 1

如果您想要增加模型查看器框的宽度和高度，那么可以很容易地在模型查看器标记上应用css。

    model-viewer{
         width:400px;
         height:400px;
    }

Answer 2

，我也有同样的问题，也是

内容被限制在一个小框中，但是html组件中有更多的空间来适应内容。

我的解决方案是执行以下操作：

将模型查看器包装在一个空的div中，并将CSS应用于DIV和实现我所希望的样式的模型查看器。

Notes

当我尝试在模型查看器上使用以下宽度值时，它的样式将不正确。

width: auto;
width: 100%;

下面的HTML

<div class="model-view-css-fix">
      <model-viewer 
       alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" 
       src="shared-assets/models/NeilArmstrong.glb" 
       ar ar-modes="webxr scene-viewer quick-look" 
       environment-image="shared-assets/environments/moon_1k.hdr" 
       poster="shared-assets/models/NeilArmstrong.webp" 
       seamless-poster shadow-intensity="1" camera-controls>
      </model-viewer>
</div>

CSS低于

宽度将无法正确的样式100%或自动，因此50%的宽度与高度比是由vh维持的。

.model-view-css-fix{
  object-fit: contain;
  height: 80vh;
  width:auto;  
}
model-viewer {
  width: 40vh;
  height: 80vh;
} 

Answer 3

只需将model-viewer包装在div中，并使用inherit值设置height和width属性。确保div将height和width设置为您选择的初始值。

div{
    height: 50vh;
    width: 50vw;
}
model-viewer{
    height: inherit;
    width: inherit;
}