打印样式：如何确保图像不跨越分页符

编写打印样式表时，有一种方法可以确保图像始终仅在单个页面上，而不是跨多个页面。图像比页面小得多，但是基于文档流，它们最终位于页面底部并被分割。我看到的行为示例如下：

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。

我能想到的唯一方法是使用以下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，div，span中，列表等）。

这里有一些有用的讨论：“ 什么是最有用的media="print"，跨浏览器兼容的CSS属性？ ”

参考文献：

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