レスポンシブウェブサイトに埋め込みFacebookの投稿

Question

私のウェブサイトにいくつかのFacebook投稿（画像）を埋め込みたいと思います。私はすべてのためにメインフレームとしてブートストラップを使用しており、典型的な画像応答性を得るのは非常に簡単です。

残念なことに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> 

私の問題は、私は、ウィンドウのサイズを変更していたとき、私は時々、それの全体のポストや他の時間上半分のみを見ることができるということです。さて、より正確には、これら2つの値の間で徐々に変化しています。良いことは決して幅が広いことではありませんが、全体を表示するのに十分な高さではありません。

もう1つの問題は、その下にテキストがオーバーレイされ、iframe_divの固定値を設定する場合にのみ表示されますが、レスポンシブデザインではありません。

レスポンシブデザインページにFacebookの投稿を埋め込むことはできますか？あなたはこれを試すのiframeのコンテナのスタイルを持っている

Answer 1

：

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

あなたのポストのためのパディングをカスタマイズすることができます。

Answer 2

最後に、この作品を交換してください：この

&width=auto

とスタイル= "幅：100％" のための

&width=500

を、それはすべての