images being cropped on iOS

[thiagomachado1998]

i have an app that generates pdfs with lots of images dynamically, but on iOS some images are cut off between the pages when they exceed the height of the pdf. i've tried using the page-break-inside: avoid property, but the pdf doesn't respect this property. does anyone know how to solve this problem of images being cut off in the pdf on iOS? i'll leave a screenshot of the pdf below showing the cut image.

${fotos.map((foto, fotoIndex) => `
  ${foto.type !== 'video' ? 
  `<div key="${item.id}_${fotoIndex}" style="flex-direction: row; margin-top: 3px; margin-bottom: 5px; margin-right: 5px; page-break-inside: avoid;">
    <div style="justify-content: center; align-items: center;">
      <div style="justify-content: center; align-items: center; position: relative;">
        <img style="width: ${DimensaoFotoPdf.largura}; height: ${DimensaoFotoPdf.altura}" src="${foto.foto}" />
        <div style="text-align: center; color: white; background-color: #161616; border-radius: 40px; border: .5px solid white; 
          font-size: ${Platform.OS === 'android' ? '0.3vw' : '10px'}; position: absolute; bottom: 0; right: 0; margin-bottom: 4px; margin-right: 4px; 
          display: flex; align-items: center; justify-content: center; padding-left: 3px; padding-right: 3px; padding-top: 1px; padding-bottom: 1px;">
          ${foto.hora}
        </div>
      </div>
    </div>
  </div>`
  : '' }
`).join('')}