Forcing image size in CFDOCUMENT

I’m using CFMX 7 and CFDOCUMENT to generate a PDF report I’ve created. It’s a paper form that we’ve “made digital” by placing the original form as a PNG in the background and then overlaying the database-backed information on top.

However, depending on the data, we are seeing weird resizing issues in the background image where it will sometimes be 100% and other times be zoomed to 200-300%. I was only able to create the report through trial and error before uploading to my production server and finding it didn’t work the same there. I was adding my background like this:

<div style="height: 10.5in; width: 8.5in; z-index: 0"><img src="/gfx/report_bg.png" /></div>

The data is then overlaid on top of the background:

<div style="position: absolute; top: 1.22in; left: 1.3in;">#vchMemberID#</div>
<div style="position: absolute; top: 1.54in; left: 1.1in;">#vchFirstName# #vchLastName#</div>
<div style="position: absolute; top: 1.86in; left: 0.8in;">#vchAddress1#</div>
<div style="position: absolute; top: 2.17in; left: 0.47in;">#vchCity#</div>

Using print CSS (“in” instead of “px”) and moving the width declaration onto the image itself seems to have fixed the scaling issue:

<div style="z-index: 0"><img src="/gfx/report_scca_bg.png" style="width: 7.4in;" /></div>

Now the image stays 7.4in wide and scales properly. This makes sense in some ways… in fact we might be able to fix the random empty pages issue with a carefully placed overflow: hidden somewhere.