如何在不调整容器大小的情况下嵌入 Instagram 帖子答案

【问题标题】：How to embed Instagram post without resizing the container如何在不调整容器大小的情况下嵌入 Instagram 帖子
【发布时间】：2016-12-10 11:01:33
【问题描述】：

我正在尝试在我的 WordPress 帖子中嵌入 Instagram 照片/视频帖子。嵌入在桌面版本中运行良好，但在移动版本中，它扩展了容器，使一切看起来更小。

See: Screenshot of mobile version

为了防止这种情况，我使用了来自 embedresponsively.com 的嵌入 iframe 代码，但它在帖子底部留下了一些空白。

See image

如何为所有设备尺寸正确嵌入 Instagram 帖子？

【问题讨论】：

标签： html css wordpress instagram

【解决方案1】：

我认为现在 Instagram 帖子可以自动嵌入到 Wordpress 帖子中，而不会在每台设备上产生任何显示问题。你也检查过这个https://www.instagram.com/developer/embedding/

此外，当您尝试在Embedresponsively 的 WP 帖子/页面上嵌入 Instagram 帖子时，您可以编辑样式并减少 padding-bottom。

.embed-container {
  position: relative; 
  padding-bottom: 120%; 
  height: 0; 
  overflow: hidden;} 

.embed-container iframe, .embed-container object, .embed-container embed { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; }

&lt;div class='embed-container'&gt;&lt;iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'&gt;&lt;/iframe&gt;&lt;/div&gt;

Embedresponsively 默认给出的代码：

<style>.embed-container {position: relative; padding-bottom: 120%; height: 0; overflow: hidden;} .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 95%; }</style><div class='embed-container'><iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'></iframe></div>

【讨论】：

问题是当我使用嵌入选项直接嵌入Instagram帖子时，它以最大宽度加载，完全加载后，它适合容器内。但几天前，我通过谷歌广告将我的网站货币化了。当页面加载时，Instagram 的帖子是最大宽度，同时 Google 广告也会加载可用空间。因此，即使在完全加载后它仍然处于中断状态，因为广告在加载后不会调整大小。
有图片可以给我看吗？您是否尝试过我告诉您的嵌入响应方式？
我将容器实现从 flexbox 更改为浮动 div。它工作正常。我猜很多浏览器还不支持 flexbox。所以我会避免使用它一段时间。

【解决方案2】：

也许这个solution 对你有用：

iframe.instagram-media {
    max-width: 100% !important;
    width: 100% !important;
    min-width: auto !important;
}

【讨论】：