[AlanHK]

I'm converting a book with photographic features.

I'd like to present each photo so it + its caption just fills a page.
They're at different ratios, some landscape, some portrait. And I'd like it to work whether the reader is in either orientation too.

What I've done is this CSS:

img.wide {
width:100%;
margin-top:1em;
margin-bottom:1em;
}

img.tall {
height:80%;
align:center;
margin-bottom:1em;
}

.caption { text-align:center;
           font-style:italic;
           margin-bottom: 1em;           
           text-indent: 0;
}

Then in the page:

  <div class="center">
    <img alt="" class="tall" src="../Images/tall.jpg" />
    <p class="caption">Tall image caption</p>
  </div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  <div class="center">
    <img alt="" class="wide" src="../Images/wide.jpg" />
    <p class="caption">Wide image caption</p>
  </div>

I use "wide" for pics wider than high, "tall" for higher than wide.
This works most of the time, but if I resize a reading app the caption can be separated from the photo.

What can I do to weld the photo + caption so they are never separated, and just resized to fit whatever the screen is?

And these should work in the text stream, so for instance a "wide" photo can fill half a page, and the article text is above and below it.

Would even consider the black art of svg if it can do it.