Print Styles: How to Ensure Your Image Does Not Cover a Page Break

Question

When writing a print style sheet, is there a way to ensure that the image is always on only one page, and not on multiple pages. Images are much smaller than the page, but based on the flow of documents, they end at the bottom of the page and become split. An example of the behavior that I see below:

Page 1 | | | (text text text) | | (text text text) | | ________________ | | | Top of image | | |____________________| ------page break------ ____________________ Page 2 | | Rest of image | | | |________________| | | … | 

What I like

 Page 1 | | | (text text text) | | (text text text) | | | | | |____________________| ------page break------ ____________________ Page 2 | ________________ | | | Full image | | | | | | | |________________| | | … | 

All those times when I chatted about swimming in LaTeX, and here I ask for the same functionality ... Can this be done? I don't necessarily care that it works in all browsers, as it is often just a one-time document that I write to turn into a PDF.

Answer 1

The only thing 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 remind you that these declarations are applicable only to block-level elements (therefore, you also need to define display: block; on your image or use some kind of container for packaging and apply rules to it (whether in the paragraph, div, span, list etc.).

The following is a useful discussion: What are the most used functions usefule media="print" , CSS properties compatible with multiple browsers? "

Literature:

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