在响应式网站上嵌入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%"

Answer 2

您必须为 iframe 的容器设置样式，试试这个：

.post-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 35px;
height: 0;
overflow: hidden;
}

您还需要将 iframe 样式设置为：

position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;

您可以为您的帖子自定义填充。