☰

印刷スタイル: 画像がページ区切りにまたがらないようにする方法 質問する

tag-icon • tag-icon css image printing print-style
印刷スタイル: 画像がページ区切りにまたがらないようにする方法 質問する

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

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 回限りのドキュメントであることが多いため、すべてのブラウザーで動作することを必ずしも心配しているわけではありません。

ベストアンサー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、span、リストなど))。

ここで役に立つ議論がいくつかあります: "media="print"最も便利な、クロスブラウザ互換性のある CSS プロパティは何ですか?「

参考文献:

おすすめ記事