Question

我添加了一个Wikipedia iframe来演示我遇到的问题。
Wiki iframe可以像预期的那样正确显示，但facebook iframe不是。

HTML：

   <div class="iframe-fb-container mt-4">
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://www.facebook.com/plugins/page.php?href=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>
      <iframe class="iframe-fb" width="450" height="700" style="border:1px solid black;overflow:hidden" scrolling="yes" frameborder="0" allowTransparency="true" allow="encrypted-media" src="https://fr.wikipedia.org/wiki/Main_Page"></iframe>
   </div>

CSS：

.iframe-fb-container {
    border: 1px solid blue;
 }

 .iframe-fb {
    width: 100%;
    }

如您所见，我在问Facebook一个宽度为 450px 的iframe，在所附图片中，模拟器的宽度为 375px ，但是fb iframe却没有不会像iframe维基百科那样填充容器。

如何使fb 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 Plugin documentation：

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

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

Answer 2

Facebook在Page Plugin site上声明

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

和

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

因此，我认为您最好的选择是尽可能填充父对象的宽度（最大为500px限制），然后将其居中放置在父对象中。如果您尝试使用facebook设置的CSS，它将开始显示不正确，例如帖子未填充时间轴。

Answer 3

请将iframe宽度设置为100％。：）

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

Answer 4

Facebook的页面插件不能作为响应容器，您必须按照{将宽度从最小180px 添加到最大500px {3}}。

documentation

您还可以查看其他答案，希望对您有所帮助。谢谢

Answer 5

向facebook bug platform提问后，我从他们那里得到了这个答案，这有助于彻底解决此问题：

根据stackoverflow中其他人的回答，文档， https://developers.facebook.com/docs/plugins/page-plugin/，您可以指定插件的宽度，但是“ 100％”无关紧要支持。

除非文档中提到错误，否则facebook documantion的报价将无济于事，该文档说：

插件的像素宽度。最小是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 的宽度为：450像素；这就是为什么Facebook iframe无法正确显示的原因。

嵌入iframe的Facebook页面无法填充容器宽度

6 个答案: