HTML—高度占iframe宽度的百分比

我在页面上有一个嵌入式sketchfab查看器，希望保持3/2的纵横比。 例如，如果高度=300px，宽度=200px。宽度需要以百分比为基础（100%的div），高度以生成宽度的百分比计算

随机猜测： 高度：（宽度的66%）与高度相似：（与宽度相同）

---

有没有办法做到这一点？

这可以通过CSS来实现

如果您想保持纵横比，我建议调整

padding top

相对于宽度的百分比

---

相应地进行调整，直到找到适合自己的解决方案。

请参见Sathran的答案：

HTML：

<div class="model-box">
<iframe class="model" src="https://sketchfab.com/models/442c548d94744641ba279ae94b5f45ec/embed" frameborder="0" allowfullscreen=""></iframe>
</div>

---

对于你的问题，我建议你试试这个。它对我有用

---

用更少或更少的SASS就可以轻松完成，但恐怕您必须自己计算。。。或者您尝试一个JavaScript解决方案。也许是jquery解决方案？我在看这个链接：我尝试了一些变化，但无法使其发挥作用。这是一种布局，但我不能得到的iframe去高度66%。请在答案中添加链接和解释

.model-box {
  position:   relative;
  width:      100%;
  height: 0;
  padding-top:   66.6%; /* This is your aspect ratio */ }

.model {
  position: absolute;
  top:      0;
  left:     0;
  bottom:   0;
  right:    0;
  width:    100%;
  height:   100%
}