как сделать изображение go на следующей странице, когда оно не помещается на странице. Есть ли способ сделать это? Я использую jsreport для создания шаблона. В настоящее время мой div уже go на следующую страницу, если он не помещается на одной странице. поэтому изображение будет следовать за div, но если изображения много, оно не помещается на одной странице, оно будет обрезано.
string+="<tr><td colspan='100%' style='font-size: 10px !important;width: fit-content !important;'>";
data[index]["Updates"].forEach(function(value2,index2){
string+="<div class='border mb-1 pt-1 px-2 divSection'><div class= 'row mb-1'>" +
"<div class='col'>("+value2["Category"]+") \xa0\xa0\xa0\xa0\xa0\xa0\xa0"+value2["Datetime"]+"\xa0\xa0\xa0\xa0\xa0\xa0\xa0 "+value2["Commented By"]+"</div>"+
"</div>" +
"<div class= 'row mb-1'>" +
"<div class='col'>"+value2["Asset"]+"</div>"+
"</div>" +
"<div class= 'row mb-2'>" +
"<div class='col'>"+value2["Comment"]+"</div>"+
"</div>" +
"<div class= 'row mb-1'>" ;
for (var i = 0; i < value2["Attch."].length; i++){
string+="<div class='col-3 d-flex justify-content-between pt-1 picSection'><img class='picSection' src='"+value2["Attch."][i]+"' min-height='35%' width='100%'></div>";
}
string+="</div></div>";
// string+=""+value2["Datetime"]+"";
})
string+="</td></tr>";
})
@media print
{
.divSection{
page-break-inside: avoid;
}
.picSection{
page-break-inside: avoid;
overflow: hidden !important;
}
}
@media print{@page
{
size: landscape;
}
}
img {
max-width:230px;
max-height:230px;
width: auto;
height: auto;
}