print css: fit in one page

22,816

Solution 1

Ok sorry for putting the "solution" as a comment:

What I've ended up doing was assume that 99% of the clients (that's true) they use a single page size. So I put some warning in the print interface that will only work with the page size "X". too bad. but it's working out so far

Solution 2

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.

Solution 3

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>
Share:
22,816
bluefoot
Author by

bluefoot

Java developer trying to get back to SO as soon as possible.

Updated on September 12, 2020

Comments

  • bluefoot
    bluefoot over 3 years

    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?