print css: fit in one page

Question

Hi. In my page there's only one image. Kind of 1500x3000 px.
In the printer, I need that this image's maximum width to be the width of the page, so I did: width 100% in the css, and it works.
But the height... the old bullshit of height 100% will never work. Because it always will be 100% of the parent container, then someone must have height defined. Or html or body.
So, my question is: make this image fit in one page.
Any ideas?

Answer 1

One way to do it would be to perform some calculations to find out what width would cause the length to be exactly one page, and then set your width in the CSS accordingly.

Answer 2

If I understand this right, could you do

.OnePageImage { height: 100%; width: 600px; }

Where 600px (the width) is the total width of the page. Then the image would fit on one page (albeit with some distortion potentially). You could also add a css page break style to a div before and after the image, which is done like this:

.break { page-break-after:always; }

Then the code would look like this:

<div class="break"></div>
<img src="[your image src]" class="OnePageImage" />
<div class="break"></div>