Anpassen iframe in einem div

Ich versuche, einen iframe in einem div zu passen. Mein Problem ist, dass ich nicht scheinen kann, um es auf 100% der Breite des div zu verschachteln, ich muss die Pixelbreite des iframe angeben.Anpassen iframe in einem div

Ich möchte, dass der iframe "innerhalb" der div ist, so dass, wenn die div von einem kleineren Browser geändert wird, auch der iframe verkleinert wird.

Dies ist mein Code:

<div class="row-fluid"> 
    <div class="span9" id="standard"> 
     <div class="header-box"> 
     <p class="header" >Bla Bla Header</p> 
     </div> 
     <div id="wrap"> 
    <iframe id="frame" src="https://docs.google.com/a/...."frameborder="0"></iframe> 
     </div> 
     </div> 
(more things in the row) 
</div>

und CSS:

#wrap { width: 1130px; height: 100%; padding: 0; 
     overflow: hidden; position:relative;} 
#frame { width: 100%; height: 100%; 
     border: 1px solid black; position:relative; } 
#frame { 
zoom: 0.75; 
-moz-transform: scale(0.75); 
-moz-transform-origin: 0 0; 
-o-transform: scale(0.75); 
-o-transform-origin: 0 0; 
-webkit-transform: scale(0.75); 
-webkit-transform-origin: 0 0;

}

Im Folgenden finden Sie, was happenswhen der Browser geändert wird. enter image description here

Quelle

2013-06-17 Julia

Schauen Sie sich die Antworten hier: http://stackoverflow.com/questions/6634582/ how-to-resize-iframe-Wenn-Eltern-Fenster-Größen Das Problem liegt wahrscheinlich daran, dass Sie eine genaue Größe Breite für Ihre 'wrap' div definieren –

Die Sache ist, ich möchte nicht, dass meine divs feste Positionen haben. Der Grund, warum ich eine genaue Größe für das Wrap div definiere, ist, dass die PDF perfekt in das div passt, wenn der Browser eine normale Größe hat. Das Foto zeigt, was passiert, wenn ich die Browsergröße reduziere. – Julia

Basierend auf dem Link von @better_use_mkstemp vorgesehen, hier ist eine Geige, wo verschachtelte iframe passt die Größe Mutter div zu füllen: http://jsfiddle.net/orlenko/HNyJS/

Html:

<div id="content"> 
    <iframe src="http://www.microsoft.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe> 
</div> 
<div id="block"></div> 
<div id="header"></div> 
<div id="footer"></div>

Relevante Teile von CSS:

div#content { 
    position: fixed; 
    top: 80px; 
    left: 40px; 
    bottom: 25px; 
    min-width: 200px; 
    width: 40%; 
    background: black; 
} 

div#content iframe { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
}

Quelle

2013-06-17 17:59:55 orlenko

Würde dieses CSS es beheben?

iframe { 
    display:block; 
    width:100%; 
}

Aus diesem Beispiel: http://jsfiddle.net/HNyJS/2/show/

Quelle

2013-06-17 18:20:46

Oh, das hat meine Website gerettet. Danke vielmals! – sunlover3

Großartig! Dies sollte die akzeptierte Antwort @Julia – Chiwda

Dank sein, arbeitete in meinem Fall –

glaube ich, eine bessere Lösung habe auf Ihrer Website ein voll ansprechbar iframe (ein Vimeo-Video in meinem Fall) einbetten zu haben. Verschachteln Sie den iFrame in einem div. Geben Sie ihnen die folgenden Arten:

div { 
    width: 100%; 
    height: 0; 
    padding-bottom: 56%; /* Change this till it fits the dimensions of your video */ 
    position: relative; 
} 

div iframe { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
}

gerade tat es jetzt für einen Kunden, und es scheint zu funktionieren: http://themilkrunsa.co.za/

Quelle

2017-01-15 10:17:41

Anpassen iframe in einem div

Antwort

Verwandte Themen