iframeに埋め込まれたメディアをwindows.print（）でズームします。

Question

私のウェブサイトには、このようなコードがあります。私はブートストラップの埋め込み応答コンポーネントを使用して、画面のサイズに応じてメディアの自動サイズを変更しました。ブラウザでうまく見えますが、window.print()を使用すると、メディアが拡大され、その一部が途切れてしまいます。

しかし、私は、印刷ボタンをクリックすると、印刷プレビューでは、この例を示します：ここで

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

は、ブラウザ上でどのように見えるかだあなたはそれが埋め込まれたように思える見ることができるように

をブラウザでうまく見えても、メディアがズームインされます。私はiframeの高さと幅を手動で設定しようとしましたが（例：width="" height=""）、印刷中にメディアが途切れることがありました。私はまた、iframeのサイズ変更に基づいて、変更を切り捨てることも学びました。だから私はブラウザを最小化し、印刷ボタンをクリックすると、埋め込まれたビジュアルが突然印刷プレビューの中に収まる！私は埋め込みメディアを印刷ページに収めて、カットされないようにしたいだけです。

Answer 1

の代わりに私が何をしたか、ブートストラップ応答コンポーネントを使用してこのにコードを変更しました：私のprint.cssの

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

を、私はこのコードブロックを追加しました：

@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; 
    } 
} 

欠点があります画面サイズの変更に対応するdivの応答性が失われることになります。それにもかかわらず、それは印刷に関する私の問題の一時的な解決策です。