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

Posted 2023-03-05

【中文标题】HTML -- iframe 的高度占宽度的百分比

【英文标题】：HTML -- height as a percentage of the width for iframe

【发布时间】：2014-05-24 14:48:57

【问题描述】：

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

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

有没有办法做到这一点？

【问题讨论】：

用 LESS 或 SASS 很容易完成，但恐怕你必须自己计算......或者你试试 javascript 解决方案。

也许是一个 jquery 解决方案？我在看这个链接：api.jquery.com/height

【参考方案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%

【参考方案2】：

这可以通过 CSS 来完成。

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

Demo here

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

【讨论】：

我尝试了几种变体，但无法正常工作。这是一种布局，但我无法让 iframe 达到 66% 的高度。 jsfiddle.net/5tzk3/1008

【参考方案3】：

对于您的问题，我建议您尝试一下。它对我有用。

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

【讨论】：

请在您的答案中添加链接和解释