Question

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

随机猜测： 高度:(宽度的66％）; 类似于高度:(与宽度相同）;

有没有办法做到这一点？

Answer 1

请参阅Sathran的回答：Height equal to dynamic width (CSS fluid layout)

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

Answer 2

这可以通过CSS完成。

如果你想保持宽高比我建议相对于宽度％调整padding-top百分比。

Demo here

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

Answer 3

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

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

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

3 个答案: