wordpress - 你能让 iFrame 响应式吗？

Question

我想在另一个网站的 WordPress 页面中嵌入一个网站。

iframed 网站是 ASP 中的联系表单处理页面，它没有响应。

我可以将它包装在响应式的 div 标签中，还是可以让 iFrame 响应式？

谢谢。

Answer 1

取决于您希望iframe响应的内容：包含块的更改或iframe内内容的更改。

如果您希望 iframe 适应包含块的大小（例如，用户调整浏览器窗口的大小），您可能希望使用百分比值向iframe元素添加相对尺寸，例如，通过样式表：

html,body {
    height:100%;
}

iframe {
  width:80%;
  height:80%;
}

为此，您还需要将html和body设置为 100% 的高度，不要问我为什么 :-) 但这个魔法很有效。

示例：http: //jsfiddle.net/4z2hn/

我想补充一下我的个人观点：最好不要使用 JavaScript 来解决布局问题。为此，请改用 CSS。当前 CSS 实现的强大功能允许样式灵活性，并提供以前不可用的设计可能性。只有当所有其他方法都失败时，才诉诸脚本解决方案。

Answer 2

不确定联系表单 asp 页面上有哪些元素。

您可以尝试通过 jquery 调整大小的方法。来自如何在缩小浏览器时创建自动调整 iframe 的大小？

$(window).resize(function() {
  $('IFRAME').width($(window).width());
});

或者使用其他方法。

在窗口调整大小时调整 iframe 的宽度

$(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

$(window).resize(function() {
   var newwidth = $(window).width() - 250;
   $('iframe').css({width: newwidth+'px'});
});

这取决于框架内的内容，调整大小对您的实际效果如何。但这是一个开始。

Answer 3

调整大小并保持原始比例。

1. 使用原始高度和宽度计算比例
2. 获取新宽度（即带有 css 的 % 大小）
3. 推导出新高度

X / newWidth = originHeight / originWidth
X = newWidth * (originHeight / originWidth )
X = 新高度

见这里： https ://jsfiddle.net/koaab543/2/

function responseveIframe() {
  $('iframe').height(
    $('iframe').attr("height") / $('iframe').attr("width") * $('iframe').width()
  );
}

responseveIframe();

$(window).resize(function() {
  responseveIframe();
});

iframe {
  max-width: 98%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe width="854" height="480" src="https://www.youtube.com/embed/C0DPdy98e4c"></iframe>

Answer 4

如果 iframe 内容不是您的页面，则您无法使其具有响应性。您可以添加 iframe 样式

iframe {
  width: 100%;
}

使 iframe 包装器响应。但是其中的内容-将与以前相同-（正如我所说-除非它也是您的页面）