Thread: Image height
View Single Post
Old 03-29-2021, 10:46 AM   #4
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,561
Karma: 20150435
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
Does KOReader support "display: grid"? If so, one could try something like this (works nicely on Firefox):

Code:
@supports (display: grid) {
  .illustration {
    display: grid;
    grid-template: "image" minmax(0,max-content) "caption" min-content;
    height: 100vh;
    width: 100%;
    margin: 0 auto;
  }
  .illustration .image {
    grid-area: image;
  }
  .illustration .caption {
    grid-area: caption;
    font-size: 80%;
    padding-top: 0.5em;
  }
}
Code:
<div class="illustration">
<span class="image"><span><img src="image.jpg" alt=""/></span></span>
<span class="caption">Blah blah blah</span>
</div>
(I'm not sure the <span> inside <span class="image"> is needed, but I must have it for a reason.)

The idea is that it should work with multi-line captions too, and the whole image+caption should take 100%.
Jellby is offline   Reply With Quote