2016-05-11 14 views
4

2つのイメージしか含まれていない単純なhtmlページを印刷しようとしています。各画像は1ページ分を塗りつぶす必要があります。私のテスト画像は、A4ページの正確なサイズが600 dpiです。2つのイメージを2つのフルページに印刷

このhtmlページは、非表示のiframeから印刷されています。 Firefoxではうまく動作します。つまり、各ページにそれぞれの画像があります。 私の問題は、クロームの上にある...第2の画像の部分は、理由のために3ページ目にある... :(

<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> 

私は、これはCSSの問題だと思うが、私は見つけることができませんでしたよりよいこれ以上レンダリング取得する方法

問題を再現デモ:。!事前にJSFiddle

おかげ

答えて

2

あなたは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/

+0

この仕事を完璧に!ありがとうございました ! – Liryna

関連する問題