html - 在响应式网站上嵌入 Facebook 帖子

Question

我想在我的网站上嵌入一些 Facebook 帖子(图片)，目的是为了响应。我将 Bootstrap 用作所有内容的主要框架，并且很容易获得典型的图像响应能力。

不幸的是，对于 Facebook 帖子，它们是 iframe 对象，它们不想很好地缩放。

对于我的测试，我使用这个 iframe:

<div class="iframe_div">    
<div>Title</div>
    <div>
    <iframe src="https://www.facebook.com/plugins/post.php?href=https%3A%2F%2Fwww.facebook.com%2FKickstarter%2Fphotos%2Fa.10152384621799885.1073741831.73182029884%2F10154511546454885%2F%3Ftype%3D3&width=500" style="border:none;overflow:hidden;width:100%;height:100%;position:absolute;left:0;" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
    </div>
    <div>Tekst</div>
</div>

我的问题是，当我改变窗口的大小时，有时我可以看到整个帖子，而其他时候只能看到它的上半部分。嗯，更准确地说，它在这两个值之间逐渐变化。好的是它永远不会太宽，但它的高度不足以显示整体。

另一个问题是它覆盖了它下面的文本，只有当我为 iframe_div 设置一些固定值时我才能看到它，但这不是响应式设计。

有没有人设法在响应式设计页面中嵌入 facebook 帖子？

Answer 1

替换src值末尾的这一段:

&width=500

为此:

&width=auto

并将此属性放入 iframe 标签中:

style="width: 100%"