印刷スタイル：画像が改ページにまたがらないようにする方法

Question

印刷スタイルシートを書くときに、画像が複数のページにまたがるのではなく、常に単一のページにのみ存在するようにする方法があります。ページよりもはるかに小さい画像ですが、ドキュメントフローに基づいて、ページの下部に配置されて分割されます。私が見ている動作の例を以下に示します。

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |  ________________  |
       | | Top of image   | |
       |____________________|
       ------page break------
        ____________________
Page 2 | | Rest of image  | |
       | |________________| |
       |         …          |

私が欲しいもの

Page 1 |                    |
       |  (text text text)  |
       |  (text text text)  |
       |                    |
       |                    |
       |____________________|
       ------page break------
        ____________________
Page 2 |  ________________  |
       | | Full image     | |
       | |                | |
       | |________________| |
       |         …          |

私はLaTeXの浮動小数点数について不平を言っていましたが、ここで同じ機能を求めています...これはできますか？これはすべてのブラウザで動作することを必ずしも心配する必要はありません。これは多くの場合、これがPDFに変換するために書いている1回限りのドキュメントであるためです。

Answer 1

私が考えることができる唯一の手段は、次のCSSルールの1つ（または潜在的にそれ以上）を使用することです：

img {
    page-break-before: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-after: auto; /* 'always,' 'avoid,' 'left,' 'inherit,' or 'right' */
    page-break-inside: avoid; /* or 'auto' */
}

これらの宣言はブロックレベルの要素にのみ適用されることを思い出してください（したがって、display: block;を使用するか、ある種のラッピングコンテナを使用して、ルールを適用します（段落、div、スパン、リストなどにあるかどうか）。

ここでいくつかの有用な議論： " 最も有用なものmedia="print"特定のクロスブラウザ互換のCSSプロパティ？ "

参照：

• page-break-after 。
• page-break-before 。
• page-break-inside 。