Wie bette ich einen responsiven Iframe eines Plotly-Graphen ein?

Question

Ich versuche ein plotly Kreisdiagramm in eine webpage einzubetten. Ich wollte, dass der iFrame reaktionsfähig ist, also habe ich this tool verwendet, um html/css dafür zu erzeugen. Das Ergebnis sieht auf einem Laptop gut aus, aber auf meinem Telefon im Hochformat kann ich das Tortendiagramm kaum sehen. Wie kann ich es beheben, so dass das Tortendiagramm auf jedem Bildschirm groß und sichtbar aussieht. Hier

ist der Code:

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

Und der Screenshot:

Answer 1

Leider, das ist, wie einbetten ansprechende Werke ... Es geht weiter, bis nichts mehr übrig ist .. Wie auch immer (meine Methode ist möglicherweise nicht optimal), habe ich die Mindestbreite und die Mindesthöhe verwendet, um die Größenreduzierung nach einer festgelegten Breite zu verhindern ... Überprüfen Sie Folgendes:

Codepen Link:https://codepen.io/anon/pen/KZMJER?editors=1100

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

Auch können Sie auf Bootstrap des embed-responsive für iframe anstelle des CSS-Code ... Nur ein Vorschlag ...

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

verwenden