CSS Printing: Image Cropped in Page Break [Solved]

Asked

Viewed 420 times

0

I’m having trouble printing, when using an image, the same cutting in the page break, I tried to use page-break-inside: avoid;, didn’t solve.
What can I do to prevent images from being cut when printing?

exemplo da imagem cortando na impressão

p.fullimg {
    page-break-before: avoid;
    page-break-after: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin: 25px 0;
    column-span: all;    
}

p.fullimg img {
    width: 100%;
}
<p class="fullimg">
<img src="20200117170144408ea9.png" >
</p>


UPDATE
I inserted the image inside a table table>tr>tr>img with break-inside: avoid;.

table.fullimg {    
    width: 100%;    
    border: 0;
    margin: 25px 0;
    column-span: all;
    break-inside: avoid;
}

table.fullimg * {
    border: 0;
    margin: 0;
    padding: 0;
}

table.fullimg img {
    width: 100%;
}
<table class="fullimg">
  <tbody>
    <tr>
      <td>
        <img src="20200117170144408ea9.png">
      </td>
    </tr>
  </tbody>
 </table>

  • Tried to put break-inside: avoid; straight into the image tag?

  • Yeah, but it didn’t solve

  • 1

    Test the image inside a type table table>tr>tr>imgand puts break-Inside: avoid; on the table and forehead. The behavior of the table may be different from a normal image, sometimes it can solve

  • @hugocsl worked fine! it’s a gambiara, but it works... kkkk the table gets cropped, but the image doesn’t. Thanks. Print: link

  • 1

    Face the table cells "cut" in a different way in these rss cases, it is the scope of the element itself and display table/table-Cell believe. When you know what you are doing, it is a technological resource, when you do not know it is gambiarra :D. Test the consistency of this solution with images of different sizes and other positions within the content to confirm that the behavior is stable. If you’re telling me that I put as an answer okay?

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.