Print html with images (every image on separate page)

Question

I have an HTML with images:

<img id="1" .../>
<img id="2" .../>
<img id="3" .../>
<img id="4" .../>

While printing, I want every image to be on a separate page (according to the print size).

Now I get the images cut off in the middle.

Is there any way to fix it?

I tried, but it doesn't work. I have 81 images and I get 78 print pages (I see the pages cut in the middle). — Inbal
– Inbal, Commented Apr 30, 2014 at 13:58
I tried: <style> @media print { img {page-break-after:always;} } </style> — Inbal
– Inbal, Commented Apr 30, 2014 at 14:05

Abdullah Elen · Accepted Answer · 2016-03-11 20:06:15Z

5

You can try the following..

<html>
    <head>
        <style type="text/css">
            @media print {
                p.pageBreak {page-break-after: always;}
            }
        </style>
    </head>
    <body>

    <p class="pageBreak">
        <img id="1" src="http://placehold.it/250x250">
    </p>
    <p class="pageBreak">
        <img id="2" src="http://placehold.it/250x250">
    </p>
    <p class="pageBreak">
        <img id="3" src="http://placehold.it/250x250">
    </p>
    <p class="">
        <img id="4" src="http://placehold.it/250x250">
    </p>
    </body>
</html>

answered Mar 11, 2016 at 20:06

Abdullah Elen

5545 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Print html with images (every image on separate page)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related