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

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中) ,列表等...).

这里有一些有用的讨论:" 什么是最常用的media="print",跨浏览器兼容的CSS属性？ "

参考文献:

• page-break-after.
• page-break-before.
• page-break-inside.