[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;
}