HTMLページをPDFとして印刷するときに、画像を正しい縮尺で表示させるにはどうすればよいですか？

Question

私はPDFとして印刷されるウェブページを持っています。画像が表示されるページが表示されるまで、すべてが素晴らしいように見えます。わからない理由から、画像の幅はきれいに見えますが、PDFプレビューに表示されるときに高さが高すぎます。

HTMLは次のようになります。ウェブページ

<table width="100%"> 
     <tr> 
      <td> 
       <table class="table table-striped table-bordered"> 
        <tr> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Top Depth Photo</span> 
          <img src="@utility.TopDepthImageUri" width="512" height="384" /> 
         </td> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Bottom Depth Photo</span> 
          <img src="@utility.BottomDepthUri" width="512" height="384" /> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <table class="table table-striped table-bordered "> 
        <tr> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Finish Photo</span> 
          <img src="@utility.FinishImageUri" width="512" height="384" /> 
         </td> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Area Photo</span> 
          <img src="@utility.AreaImageUri" width="512" height="384" /> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 

画像は罰金に見えるが、私は、印刷時にPDFプレビューは次のようになります。

あなたはそれを見ることができますテーブルの1つの行のみが表示され、画像のサイズはスケーリングされません。 （2行目は次のページにあります）

この場合、画像の正確な高さと幅を制御するにはどうすればよいですか？

Answer 1

この

<table width="100%"> 
     <tr> 
      <td> 
       <table class="table table-striped table-bordered"> 
        <tr> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Top Depth Photo</span> 
          <img src="@utility.TopDepthImageUri" style="max-width: 100%; height: auto;" /> 
         </td> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Bottom Depth Photo</span> 
          <img src="@utility.BottomDepthUrig" style="max-width: 100%; height: auto;" /> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
     <tr> 
      <td> 
       <table class="table table-striped table-bordered "> 
        <tr> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Finish Photo</span> 
          <img src="@utility.FinishImageUri" style="max-width: 100%; height: auto;" /> 
         </td> 
         <td width="50%" class="centerText"> 
          <span style="font-size:small;text-align: center;">Area Photo</span> 
          <img src="@utility.AreaImageUri" style="max-width: 100%; height: auto;" /> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 

をお試しください