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

在TestRunParameters值：

的末尾替换此片段

src

为此：

&width=500

并将此属性放入&width=auto标记：

iframe

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%;

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

在响应式网站上嵌入facebook帖子

2 个答案: