Print styles: How to ensure image doesn't span a page break
The only means I can think of is to use one (or potentially more) of the following css rules:
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...).
Some useful discussion here: "What are most usefule media="print"
specific, cross-browser compatible CSS properties?"
References:
-
page-break-after
. -
page-break-before
. -
page-break-inside
.