Stili di stampa: come assicurarsi che l'immagine non copra un'interruzione di pagina

Quando si scrive un foglio di stile di stampa, esiste un modo per garantire che un'immagine sia sempre solo su una singola pagina, invece di occupare più pagine. Le immagini sono molto più piccole della pagina, ma in base al flusso del documento, finiscono in fondo alla pagina e vengono divise. Di seguito è riportato un esempio del comportamento che vedo:

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

Quello che vorrei

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

Tutte quelle volte che mi sono lamentato dei float in LaTeX, e qui sto chiedendo la stessa funzionalità ... Può essere fatto? Non sono necessariamente preoccupato che funzioni in tutti i browser, poiché spesso questo è solo un documento una tantum che sto scrivendo per essere trasformato in un PDF.

L'unico mezzo a cui riesco a pensare è utilizzare una (o potenzialmente più) delle seguenti regole 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' */
}

Ricordo a metà che queste dichiarazioni si applicano solo agli elementi a livello di blocco (quindi dovresti anche definire display: block;sulla tua immagine, o usare una sorta di contenitore di wrapping e applicare le regole a quello (che sia in un paragrafo, div, span , elenco, ecc ...).

Qualche discussione utile qui: " Quali sono le media="print"proprietà CSS specifiche più utili e compatibili con più browser? "

Riferimenti:

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