A-Frame元素宽高设置问题：自定义尺寸无效求助

我之前也碰到过这个坑！A-Frame的<a-scene>元素默认自带了position: fixed的样式，这就导致它会强制填满整个浏览器窗口，不管你手动设置多少宽高都不生效。

要实现你想要的300px×300px的场景，只需要调整<a-scene>的定位属性，让它遵循父容器的尺寸限制就行。这里给你调整后的完整代码：

body { background: #fff; } 
.container { 
  position: absolute; 
  margin: auto; 
  top: 0; right: 0; bottom: 0; left: 0; 
  background: #f66; 
  height: 300px; 
  width: 300px; 
  overflow: hidden; 
} 
a-scene { 
  opacity: .5; 
  height: 300px; 
  width: 300px; 
  position: relative; /* 关键：修改定位方式，脱离fixed */
}

原理说明 #

• 默认的position: fixed会让<a-scene>脱离文档流，直接相对于浏览器视口定位，所以会自动占满整个窗口。
• 改成position: relative（或者absolute，因为父容器是absolute定位）后，<a-scene>会相对于父容器的位置和尺寸渲染，你设置的300px宽高就能正常生效了。

现在你可以看到场景透明度设为0.5后，能透出父容器的红色背景，说明场景确实被限制在300px的容器范围内啦。

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