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.

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