How can I print an image in a web page, fitting the paper size (A3, A4, A5, etc)?

Question

I am currently using IE9 and media queries and I have no need to have this working from other browsers.

I tried using a set of rules like:

@page {
    size: auto;
    margin: 10mm 10mm 10mm 10mm;
}

//... rules to match the millimiters of all the A formats (A0, A1, A2, etc) including margins and tolerance

/* A4 210x297 mm */
@media print and (min-height: 266mm) and (max-height: 288mm) and
    (min-width: 179mm) and (max-width: 201mm) {
    .img_port {
        height: 267mm !important;
    }
}

// ...

it seems to be working but it is not reliable because the size height and the width values passed to the CSS seems to depend on the printer even if the A4 format is always selected.

What I want to ask is if there is any other possible way to obtain the same result (fitting the image on one page according to the paper size).

Thank you in advance.

Adjoin

Answer 1

The long and short of printing in IE is that you will never be able to accurately control things like this.

Physically, printers have different capabilities when it comes to how much of the page is printable area. Then, you also have to deal with any settings that IE remembers from the last page the user printed such as zoom, margins, pages-per-page, etc.

After struggling with this for years, I have finally given up attempting control of what IE does with print pages and started treating my print stylesheets more like suggestions.

IE < 9 simply does not support page-break or @page in any meaningful way and, in my testing IE9 simply ignores almost all @page rules in favor of whatever settings the user last configured.

To suggest that IE print an image at the full width and full height of the page try the answer Landscape printing from HTML

Accountable

sticking to IE is horrible – Guaiacum

Yeah, well the question clearly states a target browser, so evangelism for other products would be pretty off topic, wouldn't you say? Also, this question is so old lol – Accountable

Not to support any other browser but just to express the pain of making everything OK with IE... – Guaiacum

Well, I think we've got it by now. Just saying that this is a place for constructive answers to the questions asked. I'm sure the "We hate IE" support group would be better holding it's meetings elsewhere. – Accountable

You win, I quit. Hope you are happy now – Guaiacum

Answer 2

Sounds like this might be a job for page-break:

.img_port {
    height: 267mm !important;  /* might also try height: 100%; */
    page-break-after: always;
    page-break-before: always;
    page-break-inside: avoid;
}

Retroaction

I cannot use a fixed height because I don't know what is the size of the paper. – Adjoin

Answer 3

You could always do this:

Create a new CSS file that holds only the CSS you want applied when printing.

*{display: hidden;}
img{display: block; width: 100%; height: 100%;}

Then you can link to it in your html doc:

<link rel="stylesheet" href="link/to/print.css" media="print" type="text/css" />

I'm not 100% on the "display: block;", you may need to try to play around with other values for "block". I have not tested this, but if you do, let me know if it works!

Kilovoltampere

I know that using (media="print") will allow you to separate the css for printing, and you can play around with it from there. – Kilovoltampere

Answer 4

There isn't any reliable way of doing so AFAIK.
We let the user choose the page size/orientation and generate a PDF of the right size containing the image. Actually you can generate a hi-res (bigger) picture to get better printing DPI and fit it to the page.

Underplot

Answer 5

Have a look at paged.js which enable good formatting for printing:

https://pagedjs.org/documentation/5-web-design-for-print/

I've found this repo very useful: https://github.com/electricbookworks/paged-design

Aplanospore

Answer 6

If you use pagebreak it will show a empty page.

img{
    page-break-inside: avoid;
    padding:0; margin:0; 
    top:0; left:0; right:0;bottom:0;  border:0;
    /*width:2480px; height:3508px!important;*/ /*a4 size */
    width:100%; height:100%; max-width:100% important!
}
.page-break  { display: block; page-break-before: always; }
@page {
size: landscape;
}
@page :first {
  margin-top: 10cm    /* Top margin on first page 10cm */
}

Dhammapada

This is not working for me. height 100% is not working. Width 100% works only if the image can be contained in a page that has the same orientation (e.g. landscape A4 with a landscape picture with a aspect ratio of 1,41). Using this CSS with a portrait image, printed in a landscape page does not fit the height but the width and the picture is then cropped. – Adjoin