web-dev-qa-db-fra.com

Styles d'impression: comment garantir que l'image ne couvre pas un saut de page

Lors de l'écriture d'une feuille de style d'impression, existe-t-il un moyen de s'assurer qu'une image est toujours uniquement sur une seule page, au lieu de s'étendre sur plusieurs pages. Les images sont beaucoup plus petites que la page, mais en fonction du flux de documents, elles se retrouvent en bas de la page et se divisent. Un exemple du comportement que je vois est ci-dessous:

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

Ce que j'aimerais

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

Toutes ces fois, je me suis plaint de flotteurs dans LaTeX, et ici je demande la même fonctionnalité ... Est-ce que cela peut être fait? Je ne suis pas nécessairement préoccupé par le fait qu'il fonctionne dans tous les navigateurs, car il s'agit souvent d'un document unique que j'écris pour être transformé en PDF.

cssimageprintingprint-style
82
davidtbernal

Le seul moyen auquel je peux penser est d'utiliser une (ou potentiellement plusieurs) des règles CSS suivantes:

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' */
}

Je me rappelle à moitié que ces déclarations ne s'appliquent qu'aux éléments de niveau bloc (il vous faudrait donc également définir display: block; sur votre image, ou utilisez une sorte de conteneur d'emballage et appliquez-y les règles (que ce soit dans un paragraphe, div, span, list, etc ...).

Quelques discussions utiles ici: " Quels sont les plus utiles media="print" propriétés CSS spécifiques, compatibles avec tous les navigateurs? "

Les références:

55
David Thomas