如何嵌入情节图的响应式iframe？

Question

我试图在webpage中嵌入阴谋饼图。我希望iframe能够响应，因此我使用this tool为它生成html / css。结果在笔记本电脑上看起来很好，但是在我的手机上以纵向模式，我几乎看不到饼图。我该如何解决它，以便饼图在任何屏幕上都看起来很大并且可见。

以下是代码：

<style>.embed-container { position: relative; padding-bottom: 56.25%;      
height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, 
.embed-container object, .embed-container embed { position: absolute;   
top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'>
<iframe frameborder='0' scrolling='no' 
src='//plot.ly/~bluprince13/3.embed?autosize=true&link=false&modebar=false&width=100%'></iframe></div>

截图：

Answer 1

不幸的是，这就是嵌入响应的工作原理......它一直持续到没有任何东西......但是（我的方法可能不是最优的），我用min-width和min-height来阻止尺寸减小设定宽度后...检查出来：

Codepen链接： https://codepen.io/anon/pen/KZMJER?editors=1100

div {
  min-width: 280px;
  min-height: 280px;
}

另外，你可以使用Bootstrap的嵌入式响应iframe而不是css代码...只是一个建议......

<div class="embed-responsive embed-responsive-4by3">
  <iframe frameborder='0' scrolling='no' src='//plot.ly/~bluprince13/3.embed?autosize=true&link=false&modebar=false&width=100%' class="embed-responsive-item" style="border:none;" ></iframe>
</div>