Keep portrail image with caption in one page?

[sHiN3]

I'm using KOReader on a Kobo Libra 2. For Epub has images and captions right under them, I've set image "width: 90%" to make it appear larger in KOReader. It looks fantastic with landscape images, because there are usually lots of spaces under the image.

If, for example, the resolution of the portrail image is "500 x 1600px", KOReader will override "windth: 90%" and fit the image with height instead, then the caption will be on the next page.

I'm currently using a div wrapper with a "bottom-margin" of 2em to display at least one line of the caption.

I'm curious whether there's a way to retain the portrail image and entire caption on one page with image "width: 90%".

I post it here because different devices / apps treat image style differently, and KOReader is my primary app.

here is the HTML code and CSS style I'm using:

  <div class="img-wrap">
    <img alt="200" src="../Images/500x1600.jpg"/> 

    <div class="img-caption">
      This is a super super super super super super super super super super super super super super long long long long long long long caption.
    </div>

div.img-wrap {
  page-break-inside: avoid;
  text-align: center;
  display: block;
  margin: 0.5em auto 2em;
}

div > img {
  width: 90%;
  margin: 0 auto;
}

div.img-caption {
  width: 90%;
  font-size: 80%;
  margin: 0.1em auto;
}

[Karellen]

Maybe this?... https://developer.mozilla.org/en-US/...Element/figure

Spoiler:

PHP Code:

    <figure class="centre">
    
      <img src="../Images/stepper.jpeg" alt="Stepper Diagram" style="width:80%"/>
      <figcaption class="centre">The plan for Willis Linsay’s original ‘Stepper’ as anonymously posted online<br/><small>(please note: the publisher accepts no responsibility for the inappropriate use of this diagram or the technology it represents.)</small></figcaption>

    </figure> 


[sHiN3]

Thanks for your reply.

Unfortunately, it doesn't work, the caption is on the next page.

Originally Posted by Karellen

Maybe this?... https://developer.mozilla.org/en-US/...Element/figure

Spoiler:

PHP Code:

    <figure class="centre">
    
      <img src="../Images/stepper.jpeg" alt="Stepper Diagram" style="width:80%"/>
      <figcaption class="centre">The plan for Willis Linsay’s original ‘Stepper’ as anonymously posted online<br/><small>(please note: the publisher accepts no responsibility for the inappropriate use of this diagram or the technology it represents.)</small></figcaption>

    </figure> 


[Frenzie]

I don't think you can do that in KOReader, but you could come close by setting something like (max-)height: 80vh on the image.

[sHiN3]

Originally Posted by Frenzie

I don't think you can do that in KOReader, but you could come close by setting something like (max-)height: 80vh on the image.

Thanks!!

I don't know this VW/VH unit before.

After deleting "width: 90%" from my previous CSS and replacing it with "height: 70vh," I got landscape images that fit to the width and portrait images that fit 70% of the screen, with adequate space for caption.

Best workaround at the moment!