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

media print css

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 del comportamiento 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 me quejé acerca de flotadores en LaTeX, 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 usar una (o potencialmente más) de las siguientes reglas de 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'' */
}

Casi recuerdo que estas declaraciones solo se aplican a elementos de nivel de bloque (por lo que también tendrías que definir display: block; en tu imagen, o usar algún tipo de envoltorio y aplicar las reglas a eso (ya sea en un párrafo) , div, span, list, etc ...).

Algunas discusiones útiles aquí: " ¿Cuáles son los media="print" más útiles como las propiedades de CSS específicas de media="print" compatibles entre navegadores? "

Referencias

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