打印樣式：如何確保圖像不會跨越分頁符

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。

Answer 1

我能想到的唯一方法是使用以下css規則中的一個（或可能更多）：

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，list等...）。

這里有一些有用的討論：“ 什么是最常用的media="print"特定的，跨瀏覽器兼容的CSS屬性？ ”

參考文獻：

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