Print styles: How to ensure image doesn’t span a page break

by

The only means 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-recall that these declarations only apply to block-level elements (so you’d also have to define display: block; on your image, or use some kind of wrapping container and apply the rules to that (whether it’s in a paragraph, div, span, list, etc…).

Some useful discussion here: “What are most usefule media="print" specific, cross-browser compatible CSS properties?“

References:

More Related Contents:

  1. Center multiple images horizontally in CSS
  2. Browser can’t access/find relative resources like CSS, images and links when calling a Servlet which forwards to a JSP
  3. SVG data image not working as a background-image in a pseudo element
  4. CSS force image resize and keep aspect ratio
  5. CSS Image size, how to fill, but not stretch?
  6. CSS to set A4 paper size
  7. CSS transition effect makes image blurry / moves image 1px, in Chrome?
  8. How to vertically align an image inside a div
  9. Remove header and footer from window.print()
  10. How can I resize an image dynamically with CSS as the browser width/height changes?
  11. Drop shadow for PNG image in CSS
  12. Browser Support for CSS Page Numbers
  13. Bootstrap icons are loaded locally but not when online
  14. CSS Printing: Avoiding cut-in-half DIVs between pages?
  15. how to avoid extra blank page at end while printing?
  16. How to only show certain parts with CSS for Print?
  17. image moves on hover – chrome opacity issue
  18. How to put an image in div with CSS?
  19. Responsive Images with CSS
  20. Cross browser way to rotate image using CSS?
  21. Replace input type=file by an image
  22. Suggestions for debugging print stylesheets?
  23. Symfony2 – Assetic – load images in CSS
  24. Need to remove href values when printing in Chrome
  25. Define an ‘s src attribute in CSS [duplicate]
  26. vertical-align image in div [duplicate]
  27. How to vertically align an image inside a div
  28. How to use images in css with Webpack
  29. input type=”image” shows unwanted border in Chrome and broken link in IE7
  30. Image scaling by CSS: is there a webkit alternative for -moz-crisp-edges?

Leave a Comment