Estilos de impresión: cómo garantizar que la imagen no abarque un salto de página

Question

Al escribir una hoja de estilo de impresión, hay una manera de garantizar que una imagen siempre esté en una sola página, en lugar de abarcar varias páginas. Las imágenes, mucho más pequeñas que la página, pero basadas en el flujo de documentos, terminan en la parte inferior de la página y se dividen. Un ejemplo de la conducta que estoy viendo es a continuación:

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

lo que me gustaría

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

Todas esas veces que quejándose de los flotadores en el látex, y aquí estoy pidiendo la misma funcionalidad ... ¿Se puede hacer esto? No estoy necesariamente preocupado de que funcione en todos los navegadores, ya que a menudo es solo un documento de una sola vez el que estoy escribiendo para convertirlo en PDF.

Answer 1

el único medio que se me ocurre es utilizar una (o posiblemente más) de las siguientes reglas 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' */ 
} 

que media recordemos que estas declaraciones sólo se aplican a elementos de nivel bloque (por lo que también tiene que definir display: block; en su imagen, o usar algún tipo de envoltorio y aplicar las reglas a eso (ya sea en un párrafo, div, span, lista, etc.).

Algunos comentarios útiles aquí: "What are most usefule media="print" specific, cross-browser compatible CSS properties?"

Referencias:

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