Facebook 页面嵌入 iframe 未填充容器宽度

Answer 1

你无法以正常方式做到100%。

这是你的 iframe src：

https://www.facebook.com/Microsoft/&tabs=timeline%2Cevents%2Cmessages&width=450px&height=700px&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>

注意有参数：

width=450px

。

它将 iframe 内容的宽度设置为 450px。

根据Facebook插件文档：

The pixel width of the plugin. Min. is 180 & Max. is 500

.

所以 Facebook 可以获得的最大宽度是 500。

Answer 2

Facebook 在 Page Plugin 网站

上声明

默认情况下，插件将在页面加载时适应其父容器的宽度（最小 180 像素/最大 500 像素），这对于更改布局非常有用

和

无动态调整大小 页面插件适用于响应式、流体和静态布局。您可以使用媒体查询或其他方法来设置父元素的宽度，但是： 该插件将确定页面加载时的宽度 页面加载后，它不会对盒模型的更改做出反应。 如果您想在窗口大小调整时调整插件的宽度，您需要手动重新渲染插件。

所以我认为最好的选择是尽可能填充父级的宽度（最多 500px 限制），然后将其在父级中居中。 如果你尝试覆盖 facebook 设置的 CSS，它就会开始显示不正确，例如帖子没有填满时间线。

Answer 3

jQuery 解决方案怎么样？

jQuery(window).on("load resize", function () {
  jQuery('iframe[src*="facebook.com"]').each(function () {
    /* get width of parent element */
    var width = Math.round(jQuery(this).parent().width());
    if (width > 500) {
      width = 500;
    } else if (width < 180) {
      width = 180;
    }

    /* replace width value in iframe src */
    var src = new URL(jQuery(this).attr("src"));
    src.searchParams.set("width", width);

    /* append new width */
    jQuery(this).attr("src", src);
    jQuery(this).attr("width", width);
  });
});

此脚本获取父元素的宽度并相应地调整 iframe。

Answer 4

Facebook 的 Page Plugin 它不能用作响应式容器，您必须按照 documentation 将宽度从 最小 180px 添加到 最大 500px。

你也可以看看其他的答案，希望对你有帮助。谢谢

响应宽度 Facebook 页面插件

Answer 5

在 facebook bug 平台询问后我从他们那里得到了这个答案，这有助于一劳永逸地解决这个问题：

正如 stackoverflow 中其他人已经回答的那样，根据 文档， https://developers.facebook.com/docs/plugins/page-plugin/，您可以 指定插件的宽度，但是，“100%”并不是什么 支持。

来自 facebook 文档的引用没有帮助，除非您针对代码中的错误引用它们，文档如下：

插件的像素宽度。分钟。是 180 & 最大。是 500

并不是说不支持父容器100%宽度！
唯一接近弄清楚的答案是阿隆的，这就是他获得赏金的原因。

最终这就是我得到的代码：

HTML：

 <div class="iframe-fb-container">
   <iframe class="iframe-fb border" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=https%3A%2F%2Fwww.facebook.com%2FGringo.co.il%2F&tabs=timeline&width=400&height=700&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId=2235597906716847"></iframe>
 </div>

CSS：

.iframe-fb-container {
    text-align: center;
    width:400px;
    height:700px;
    display:inline-block;
}

.iframe-fb {
    width: 400px;
    height: 700px;
    overflow: hidden;
}

我希望这个答案能帮助将来的人:)

Answer 6

因为 _2p3a 和 uiScaledImageContainer _2zfr 的宽度为：450px；这就是为什么 facebook iframe 无法正确显示的原因。

Answer 7

您始终可以使用比例缩放 iframe：

iframe {
    transform: scale(1.3)
}

Answer 8

请将 iframe 宽度设置为 100%。 :)

iframe{
  width: 100% !important  //important if not working without it..
}