javascript - 使用javascript打印时图像尺寸变大

Question

我正在编写代码来打印身份证，因此我使用javascript编写了打印特定的“div”，打印操作正常工作，但身份证上的图像出现问题，它在打印窗口上变得越来越大。我的代码如下

HTML

<input type="button" class="btn btn-primary" onclick="printDiv('id-card')" value="print" />

<div class="x_content">
  <?php foreach ($idcard_reports as $key => $value) {
          $img_path = base_url("assets/images/user.png");
          if($value->photo!=''){
           $img_path = base_url("assets/images/uploads/".$value->photo);
          } ?>
  <div class='id-card' id='id-card'>
    <h3>School Name</h3>
    <img src="<?php echo $img_path?>" class='id-card-img'>
    <div class='id-card-inside-content'>
      <p><span><b>Name</b></span> : <?php echo $value->preferred_name; ?></p>
      <p><span><b>Register No</b></span> : <?php echo $value->register_no; ?></p>
      <p><span><b>Class</b></span> : <?php echo $value->class; ?></p>
      <p><span><b>Section</b></span> : <?php echo $value->section; ?></p>
      <p><span><b>Roll</b></span> : <?php echo $value->roll_no; ?></p>
      <p><span><b>Blood Group</b></span> : <?php echo $value->blood_group; ?></p>
    </div>
  </div>
</div>
<?php  } ?>

Javascript：

function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   document.body.innerHTML = printContents;
   window.print();
   document.body.innerHTML = originalContents;
}

CSS：

.id-card{
 border:1px solid black;
 width:257px;
 height:290px;
 text-align: center;
 float: left;
}
.id-card img{
  width: 50px;
  height: 50px;
  max-width:100%
}
.id-card .id-card-inside-content{
  width: 100%;
  margin-bottom: 0px;
  margin-top: 5px;
}
@media print {
  body * {
    visibility: hidden;
  }
  #id-card, #id-card * {
    visibility: visible;
  }
  #id-card {
    position: absolute;
    left: 0;
    top: 0;
  }
}

要打印的身份证的屏幕截图：

单击“打印”按钮后，打印屏幕将如下所示：

我的目标是在单击“打印”按钮之前以用户身份正常打印身份证上的图像。非常感谢。

标签： javascriptphpjqueryprinting