Experimental CSS to get portrait-aspect-ratio image + caption on same page, on reflow

portrait-caption.css

/* Current nugget */

/* This in your fallback CSS (for ePub 2) */
.portrait-caption {
  height: 99%;                /* must check if necessary */
  margin: 1.5em 0; 
  page-break-before: auto;
}
.portrait-caption > img {
  width: auto;
  max-width: 100%;
  height: 80%;
}


/* The following in another CSS (EPUB 3) */

/* EPUB 3 FALL-FALL-FALLBACK */

.portrait-caption {
  background-color: yellow;  /* I'm using bg-color to check which styles are applied in RS */
}
.portrait-caption > img {
  height: 80vh;
  max-height: 800px;      /* Must check CSS specs — how max-height is supposed to behave when vh/calc on height */
  object-fit: contain;    /* to keep aspect-ratio of image. Thanks iBooks’ default CSS for that */
}

/* Feature query using @supports = progressive enhancement */

@supports (page-break-before: always) and (height: calc(99vh - 5em)) {
  .portrait-caption {
    min-height: 100vh;              /* fallback for the following line if anything goes wrong */
    min-height: calc(100vh - 0px);  /* = 100vh but we make sure it is recomputed when doc is updated */
    width: 100%;                    /* is probably useless */
    background-color: LightGreen;
    page-break-before: always;           /* So… ADE doesn't support that though it says it does */
    -webkit-column-break-inside: avoid;  /* making ADE behaves */
    display: block;
    margin: 0;               /* image in flow, it is not in its own xhtml file. That's the magic. */
  }
  .portrait-caption > img {
    box-sizing: border-box;  /* because padding */
    max-width: 100%;
    min-height: 60vh;        /* So that it doesn't become ridiculously tiny when huge font-size is set */
    height: -webkit-calc(98vh - 5em); 
    height: calc(98vh - 5em);           /* 98vh - caption’s height || Fallback is 80vh */
    object-fit: contain;                /* to keep aspect-ratio of image. Thanks iBooks’ default CSS for that */
    padding: 1vh 0;          /* if for some reason it breaks inside, we make sure we got a padding at top of image, bottom for caption */
    margin: 0 auto;          /* centering */
  }
}

/* For Readium scroll as the viewport is unreliable.
   1. min-height depends on your documents’ sizes. Using `em`
      makes sure it is recomputed when font-size is changed. 
      Maybe we could find something else? 
   2. FYI, if you just got an image in a xhtml file,
      Readium’s default viewport in scroll is 300 x 150px
      so your 100vh-height image will be 150px.                 */

@media screen and (min-height: 150em) {
  .portrait-caption {
    display: block;
    margin: 1.5em 0;
    min-height: 0;   /* reset */
    height: auto;    /* reset */
    background-color: red;
  }
  .portrait-caption > img {
    min-height: 300px;   /* reset */
    height: auto;        /* reset as we rely on max-width */
    max-height: 100%;
    max-width: 100%;     /* Pic will scale based on its width */
    padding: 0;
  } 
}

I applaud you, sir, even if all of this hoop-jumping makes me want to cry.