Geek Answers Handbook

Printing two images on two full pages

I am trying to print a simple html page containing only two images. Each image should fill a full page. My test images have an exact A4 size with a resolution of 600 dpi.

This html page is printed from a hidden iframe. In Firefox, this works well, which means that I have every image on every page. My problem is on chrome ... a fragment of the second image is on the third page for a reason ... :(

<html>
<head><title>DoubleA4</title></head>
<body>
  <div style="position: absolute;  left: 0;  top: 0;  bottom: 0;  right: 0;">
  <img style="width: 100%; height: 100%;" src="http://img15.hostingpics.net/pics/369262front.png">
  <img style="width: 100%; height: 100%;" src="http://img15.hostingpics.net/pics/143216back.png">
  </div>
</body>
</html>

I think this is a CSS issue, but I could not find a way to get a better render than this.

Demo that reproduces the problem: JSFiddle

Thanks in advance!

+4
1

block , , .

.

var pages = '<html><head><title>DoubleA4</title></head><body>';
pages += '<div style="position: absolute;  left: 0;  top: 0;  bottom: 0;  right: 0; margin: 0; padding: 0; display: block;">';
pages += '<img style="width: 100%; height: 100%; margin: 0; padding: 0; display: block;" src="http://img15.hostingpics.net/pics/369262front.png">';
pages += '<img style="width: 100%; height: 100%; margin: 0; padding: 0; display: block;" src="http://img15.hostingpics.net/pics/143216back.png">';
pages += '</div></body></html>';

JSFiddle :

https://jsfiddle.net/0a83ymzz/6/

+2

More articles:


All Articles