超文本标记语言--iframe的高度占宽度的百分比

Question

我在页面上有一个嵌入式草图查看器，想要保持3/2的宽高比。因此作为示例，如果Height=300px则宽度=200px。宽度需要基于百分比（div的100%），高度计算为生成宽度的百分比。

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

有没有办法做到这一点？

Answer 1

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

<iframe style="position:absolute;height:100%;width:100%;border:none"></iframe>

Answer 2

这可以通过CSS来完成。

如果您想保持纵横比，我建议调整padding top相对于宽度的百分比。

这里演示

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

Answer 3

参见Sathran的答案：高度等于动态宽度（CSS流体布局）

HTML：

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

CSS：

.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%
}