CSS 打印样式：如何确保图像不会跨越分页符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2649169/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Print styles: How to ensure image doesn't span a page break
提问by davidtbernal
When writing a print stylesheet, is there a way to ensure that an image is always only on a single page, instead of spanning multiple pages. The images much smaller than the page, but based on the document flow, they end up at the bottom of the page and get split. An example of the behavior I'm seeing is below:
在编写打印样式表时，有没有办法确保图像始终只在一个页面上，而不是跨越多个页面。图像比页面小得多，但根据文档流，它们最终位于页面底部并被拆分。我所看到的行为示例如下：
Page 1 | |
| (text text text) |
| (text text text) |
| ________________ |
| | Top of image | |
|____________________|
------page break------
____________________
Page 2 | | Rest of image | |
| |________________| |
| … |
What I'd like
我想要什么
Page 1 | |
| (text text text) |
| (text text text) |
| |
| |
|____________________|
------page break------
____________________
Page 2 | ________________ |
| | Full image | |
| | | |
| |________________| |
| … |
All those times I complained about floats in LaTeX, and here I am asking for the same functionality... Can this be done? I'm not necessarily concerned about it working in all browsers, since this is often just a one-off document I'm writing to be turned into a PDF.
那些时候我一直在抱怨 LaTeX 中的浮动，在这里我要求相同的功能......这可以做到吗？我不一定担心它在所有浏览器中都可以运行，因为这通常只是我正在编写的一次性文档以转换为 PDF。
采纳答案by David says reinstate Monica
The only means I can think of is to use one (or potentially more) of the following css rules:
我能想到的唯一方法是使用以下 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' */
}
I half-recall that these declarations only apply to block-level elements (so you'd also have to define display: block;on your image, or use some kind of wrapping container and apply the rules to that (whether it's in a paragraph, div, span, list, etc...).
我有一半记得这些声明只适用于块级元素（所以你还必须display: block;在你的图像上定义，或者使用某种包装容器并将规则应用于它（无论它是在段落、div、跨度中） 、列表等...）。
Some useful discussion here: "What are most usefule media="print"specific, cross-browser compatible CSS properties?"
这里有一些有用的讨论：“什么是最有用的media="print"特定的、跨浏览器兼容的 CSS 属性？”
References:
参考：
