eue

css

<style>
body {
  background: url("$description");
  background-size: cover;
}

* {
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
}
#badge-wrapper {
  position: relative !important;
  width: 5.5cm;
  height: 8.5cm;
}
.badge-data {
  position: absolute;
  top: 45%;
  text-align: right;
  width: 100%;
}
.visitor_detail {
  margin-top: 20px;
  margin-bottom: 3%;
  height: 100%;
  vertical-align: middle;
}
.visitor_detail .visitor_info {
  display: inline-block;
  vertical-align: middle;
  word-break: break-all;
  width: 90px;
}
div.fullname_detail {
  font-size: 10px;
  line-height: 15px;
}
div.company_detail {
  font-size: 8px;
}
.visitor_detail img.visitor_photo {
  width: 65px;
  height: 80px;
  display: inline-block;
  margin-right: 15px;
  margin-left: 3%;
  vertical-align: middle;
}
.barcode {
  text-align: center;
}
.barcode img {
  width: 132.283465px;
  height: 31px !important;
}
.barcode span {
  display: block;
  font-size: 4px;
  font-weight: bold;
}
</style>

<div id="badge-wrapper">
  <div class="badge-data">
    <div class="visitor_detail">
      <div class="visitor_info">
        <div class="fullname_detail">$firstname $lastname</div>
        <div class="company_detail">$company</div>
      </div>
      <img class="visitor_photo" src="$photo">
    </div>
    <div class="barcode">
      $barcode
    </div>
  </div>
</div>

pdf size: 0,0,153.071,239.2441

page html size: 5.44cm 8.44cm