CODEWITHSUNDEEP
cssprintingmedia
bluefoot
bluefoot

Reputation: 10580

print css: fit in one page

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?

Upvotes: 18

Views: 27554

Answers (4)

atomless
atomless

Reputation: 1282

The only thing that limited the print output to a single page for me was setting the height in cm of a container element that wrapped the entire page, and also setting it's overflow to hidden. For some reason this didn't seem to work on the body element.

body > section {
    padding:0 !important;
    margin:0 !important;
    height:25.7cm !important;
    overflow:hidden !important;
}

Incidentally, I had hoped that setting page-break-inside to avoid on the body or the container element might have been the solution to limiting to a single print page but that doesn't seem to have any effect at all.

Upvotes: 0

bluefoot
bluefoot

Reputation: 10580

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

Upvotes: -1

theJerm
theJerm

Reputation: 4572

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>

Upvotes: 2

Robert Harvey
Robert Harvey

Reputation: 180938

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.

Upvotes: 3

Related Questions