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

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： ; 在你的图像上，或者使用某种包装容器并应用规则（无论是在段落、div、span、列表等中......）。

block href="https://stackoverflow.com/questions/2226939/what-are-most-useful-mediaprint-specfic-cross-browser-company-css-properti">什么是最有用的 media="print" 特定的、跨浏览器兼容的 CSS 属性？”

参考：

• 分页后。
• page-break-before。
• page-break-inside。