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?
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?– hugocsl
Yeah, but it didn’t solve
– Adriano Campos
Test the image inside a type table
table>tr>tr>img
and 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
@hugocsl worked fine! it’s a gambiara, but it works... kkkk the table gets cropped, but the image doesn’t. Thanks. Print: link
– Adriano Campos
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?
– hugocsl