Android项目HTML转PDF：签名图片重叠/变形问题求助

Hey there! As someone who's worked on similar PDF export projects, I totally get how frustrating this signature image problem can be. Let's break down what's causing the issues with your current code and fix them step by step.

The Root of Your Problems #

Right now, your .sigbox uses a fixed height:100px and max-height:100px, which locks the container size. Combined with the .inbox positioning that pulls it out of the normal document flow, large signature images either spill into the previous page, overflow into the date area, or get stretched out when you force both width and height.

Solution 1: Let the Signature Push Content Down (Fix Page Overlap) #

If you want larger signatures to automatically expand the container and push the rest of the content (including page breaks) down, adjust your CSS to let the signature box adapt its height:

@media print { 
  .pagebreak { page-break-before: always; } 
} 
h1, h2 { text-align: center; } 
h2, h3 { margin-top: 3em; } 
body, p, h1, h2, h3 { font-family: Helvetica; } 
.col-1-3 { width: 33.3%; float: left; padding-right: 20px; } 
/* Updated signature box styles */
.sigbox { 
  position: relative; 
  min-height: 100px; /* Keep a minimum height for small signatures */
  display: block; /* Switch to block to take full width */
  margin-bottom: 10px;
  width: 100%;
} 
.inbox { 
  /* Remove position tricks that break document flow */
  margin-top: 8px;
  width: 100%;
  text-align: center; /* Optional: Center the signature label */
} 
.grid:after { content: ""; display: table; clear: both; } 
.border { -webkit-box-sizing: border-box; box-sizing: border-box; }

Why This Works: #

• min-height:100px keeps the signature box from collapsing for small images, but lets it grow vertically when needed.
• Switching .sigbox to display:block ensures it takes up the full width of its container and stays in the normal document flow—so when it expands, it pushes all content below it (including page breaks) down, eliminating overlap with the previous page.
• Removing the transform and absolute positioning from .inbox keeps it aligned properly within the signature box.

Solution 2: Scale Signatures Proportionally (Prevent Date Area Intrusion) #

If you need to keep the signature box at a fixed size (100px height) but don't want images to stretch or spill into the date area, use object-fit to scale the image proportionally within the box:

@media print { 
  .pagebreak { page-break-before: always; } 
} 
h1, h2 { text-align: center; } 
h2, h3 { margin-top: 3em; } 
body, p, h1, h2, h3 { font-family: Helvetica; } 
.col-1-3 { width: 33.3%; float: left; padding-right: 20px; } 
.sigbox { 
  position: relative; 
  height: 100px; /* Fixed height for the signature box */
  display: block;
  width: 100%;
  border-bottom: 1px solid #000; /* Optional: Add a signature line */
} 
/* Add this style for the signature image */
.sigbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /* Scales image proportionally without distortion */
  display: block;
  margin: 0 auto; /* Optional: Center the image */
}
.inbox { 
  margin-top: 8px;
  width: 100%;
  text-align: center;
} 
.grid:after { content: ""; display: table; clear: both; } 
.border { -webkit-box-sizing: border-box; box-sizing: border-box; }

Why This Works: #

• max-width:100% and max-height:100% ensure the image never exceeds the bounds of the .sigbox.
• object-fit:contain scales the image to fit within the box while maintaining its original aspect ratio—no stretching, no cropping, and no spilling into the date area below.

Bonus Tip: Prevent Signature from Splitting Across Pages #

To make sure the entire signature section doesn't get split between two pages in the PDF, add a wrapper container with a page-break rule:

.sig-section {
  page-break-inside: avoid;
}

Then wrap your signature HTML like this:

<div class="sig-section">
  <div class="sigbox">
    <img src="your-signature-image-path" alt="User Signature">
  </div>
  <div class="inbox">签名</div>
  <div class="date-area">日期：______</div>
</div>

This tells the PDF renderer to keep the entire signature section on one page if possible.

内容的提问来源于stack exchange，提问作者Ben987654