eingebettete Medien auf iFrame zoomt in Windows.print()

Question

Ich habe ein eingebettetes Medium auf meiner Website, die so auf Code aussieht. Ich habe die embed-responsive Komponente des Bootstrap verwendet, um die Größe des Mediums abhängig von der Größe des Bildschirms automatisch anzupassen. Es sieht gut aus und funktioniert gut im Browser, aber wenn ich window.print() verwende, wird das Medium gezoomt und Teile davon abgeschnitten.

<div id="powerbi-include" class="embed-responsive embed-responsive-16by9"> 
    <iframe id="iframePrint" class="embed-responsive-item" src="..." frameborder="0" allowfullscreen="true"> 
    </iframe> 
</div> 

Hier ist, wie es aus wie auf dem Browser aussieht:

Aber wenn ich auf die Schaltfläche Vorschau der Druck drucken klicken zeigt dies:

Wie Sie es scheint, wie die eingebettete sehen Medien werden gezoomt, auch wenn es im Browser gut aussieht. Ich habe sogar versucht, die Höhe und Breite des Iframes manuell einzustellen (z. B. width="" height=""), aber das Medium wird gerade beim Drucken abgeschnitten. Ich habe auch gelernt, dass basierend auf der Größe des Iframes, was abgeschnitten wird, auch Änderungen vorgenommen werden. Wenn ich also den Browser verkleinere und auf die Druckschaltfläche klicke, passt die eingebettete Grafik plötzlich in die Druckvorschau! Ich möchte nur, dass meine eingebetteten Medien in die Druckseite passen und nicht abgeschnitten werden.

Answer 1

Statt die Bootstrap ansprechende Komponente mit, was ich tat, war den Code in das ändern:

<div id="powerbi-include" style="zoom: 3.55"> 
    <iframe id="iframePrint" src="..." frameborder="0" allowfullscreen="true"> 
    </iframe> 
</div> 

auf meinem print.css ich diesen Code-Block hinzugefügt:

@media print { 
    #powerbi-include { 
     -moz-transform: scale(0.70, 0.70); 
     -webkit-transform: scale(0.70, 0.70); 
     -o-transform: scale(0.70, 0.70); 
     -ms-transform: scale(0.70, 0.70); 
     transform: scale(0.70, 0.70); 
     -moz-transform-origin: top left; 
     -webkit-transform-origin: top left; 
     -o-transform-origin: top left; 
     -ms-transform-origin: top left; 
     transform-origin: top left; 
    } 
} 

Der Nachteil ist, dass dies die Reaktionsfähigkeit des div gegenüber Bildschirmgrößenänderungen wegnimmt. Trotzdem ist es eine vorübergehende Lösung für mein Problem mit dem Drucken.