MobileRead Forums - View Single Post

Jaws · 07-11-2026, 08:44 PM

There are really two things that I'd do to create this display flow; there are other methods, but I find this easiest to go back later and revise.

First, in the HTML image calls themselves, make sure that you haven't set width and height with anything except the "100%" parameter, which might look like (leaving the angle brackets off because they get screwy if you try to quote this):

Code:

img src="cover.jpg" width="100%"

which should leave the aspect ratio (proportions) the same. And avoid SVG if at all possible, too, because some of the results can be unpredictable.

Second, impose a style with the page-break-before parameter. This is best in a structure like this (again, leaving off angle brackets):

Code:

p class="imagemain"
   img src="cover.jpg" width="100%"
/p

and the style imagemain looks something like this:

Code:

.imagemain {
  page-break-before: always;
  margin-top: 0;
  text-align: center;
  }

which, for a fully-HTML-and-CSS-compliant reader, would do the trick. (Unfortunately, none of the proprietary systems — Kindle, Kobo, iPad, etc. — are fully HTML-and-CSS compliant, so there Will Be Glitches.)

07-11-2026, 08:44 PM	#2
Jaws JCL Punch-Card Collector Posts: 113 Karma: 606560 Join Date: Jun 2014 Location: Antarctica Device: Aggressively Device Independent	There are really two things that I'd do to create this display flow; there are other methods, but I find this easiest to go back later and revise. First, in the HTML image calls themselves, make sure that you haven't set width and height with anything except the "100%" parameter, which might look like (leaving the angle brackets off because they get screwy if you try to quote this): Code: img src="cover.jpg" width="100%" which should leave the aspect ratio (proportions) the same. And avoid SVG if at all possible, too, because some of the results can be unpredictable. Second, impose a style with the page-break-before parameter. This is best in a structure like this (again, leaving off angle brackets): Code: p class="imagemain" img src="cover.jpg" width="100%" /p and the style imagemain looks something like this: Code: .imagemain { page-break-before: always; margin-top: 0; text-align: center; } which, for a fully-HTML-and-CSS-compliant reader, would do the trick. (Unfortunately, none of the proprietary systems — Kindle, Kobo, iPad, etc. — are fully HTML-and-CSS compliant, so there Will Be Glitches.)