Image height

JSWolf · 03-29-2021, 08:03 AM

I have some full screen images that I want to be displayed at 90% height so the caption can go at the bottom on the images. What's the best way to do this in KOReader? I'm using the February 2021 stable build. Thanks.

Frenzie · 03-29-2021, 10:32 AM

Generally something like (max-)height: 90% or 90vh.

Edit: for example:

Code:

img {
 width: auto;
 height: 90vh;
}

JSWolf · 03-29-2021, 10:41 AM

Quote:

Originally Posted by Frenzie

Generally something like (max-)height: 90% or 90vh.

Edit: for example:

Code:

img {
 width: auto;
 height: 90vh;
}

I did try that with 90% as it's an ePub2. I'll give 90vh a go.

Jellby · 03-29-2021, 11:46 AM

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%.

JSWolf · 03-29-2021, 01:52 PM

Quote:

Originally Posted by Jellby

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%.

The code does not work in Sigil or KOReader. The solution was given in the post before yours.

JSWolf · 03-29-2021, 01:52 PM

Quote:

Originally Posted by Frenzie

Generally something like (max-)height: 90% or 90vh.

Edit: for example:

Code:

img {
 width: auto;
 height: 90vh;
}

Thanks. That works.

Frenzie · 03-29-2021, 05:29 PM

Quote:

Originally Posted by Jellby

Does KOReader support "display: grid"? If so, one could try something like this (works nicely on Firefox):

No, not flex either.

03-29-2021, 08:03 AM	#1
JSWolf Resident Curmudgeon Posts: 80,782 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Image height I have some full screen images that I want to be displayed at 90% height so the caption can go at the bottom on the images. What's the best way to do this in KOReader? I'm using the February 2021 stable build. Thanks.

03-29-2021, 10:32 AM	#2
Frenzie Wizard Posts: 1,786 Karma: 731691 Join Date: Oct 2014 Location: Antwerp Device: Kobo Aura H2O	Generally something like (max-)height: 90% or 90vh. Edit: for example: Code: img { width: auto; height: 90vh; }

03-29-2021, 11:46 AM	#4
Jellby frumious Bandersnatch Posts: 7,570 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%.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Have chapter title & image take up 50% of page height and resize img automatically?	dibster	ePub	12	12-01-2020 01:57 PM
Image resizing issues while using max-height/max-width	Detroa	ePub	22	08-26-2020 07:17 PM
QT5 and image height	Turtle91	Sigil	23	02-21-2013 02:44 PM
Image height in div	soparch	ePub	5	03-29-2012 02:18 PM
What image height causes images to fill the screen?	karenbryant	ePub	7	01-04-2012 05:23 AM