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

Question

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

随机猜测: 高度:(宽度的66%); 类似于高度:(与宽度相同);

有没有办法做到这一点？

Answer 1

请参阅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%
}

Answer 2

这只需通过 CSS 即可完成。

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

演示在这里

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