Question

我有一个关于调整iframe内容大小的一般问题。我观察到，如果我更改包含iframe的外部div的宽度，那么iframe内容将根据外部div宽度规范进行调整。对于height属性，情况也是如此。有人可以向我解释或引导我更多吗？

通过更改高度和宽度属性值，我的意思是指定百分比的高度和宽度，而不是像素值。

示例：

<div style="width:100%;height:100%"> <iframe style="width:100%;height:100%" src="http://www.gizmodo.com"></iframe> </div>

Answer 1

如果你想让你的iframe响应宽度变化并保持比例，你必须使用这样的填充来使用包装div的宽高比：

HTML

<div class="wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/qajXpi048nE" frameborder="0" allowfullscreen></iframe>

CSS

.wrapper {
  position: relative;
  padding-bottom: 56.25%;
}
.wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

因此，要指定iframe的宽度和高度，您只需要使用包装div的填充底部。

Check this jsfiddle

Original source

使用CSS，iframe的高度不会根据外部div高度调整大小

1 个答案: