Formatting Images

Traveller47 · Yesterday, 01:35 PM

I am trying to create an epub using Calibre. The book consists of pages of plain text followed by a large number of images - some portrait format and some landscape format.
The problem that I cannot solve is how to force each image onto a new page and arrange for it to fill as much of the page as possible. At present, the portrait images display correctly in full page when the reader is held vertically. The landscape images also display OK but are of course constrained by the width of the screen. However, since each image occupies less than half the screen, the following image pops onto the same page. Also, the landscape images do not resize to fill the screen when the device is rotated.
Ideally, I would like all images to display full page Although this would clearly mean the viewer having to rotate their device.
Please can anyone offer a solution? I am new to epub creation so the more detail provided the better.

All comments appreciated

Jaws · Yesterday, 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.)

DNSB · Yesterday, 08:44 PM

I've been using an SVG wrapper for images intended to be used on a full page. Replace the 1000 width and 1500 height with the appropriate ones for your image sizes (note that those numbers are used twice).

The HTML code used is:

Code:

<body class="cover">
  <div class="picWrapper">
    <svg class="pic" xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 1000 1500" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink"><image height="1500" width="1000" xlink:href="../Images/cover.jpeg"/></svg>
  </div>
</body>

The code in the stylesheet is:

Code:

.cover {
  margin: 0;
  height: 99vh; /* This property is for epub3 */
  max-width: 100%; /* This property is for epub3 */
  overflow: hidden !important;
}

.picWrapper {
  margin: 0;
  padding: 0;
  height: 100%; /* This property is for epub3 */
}

.pic { /* This is the epub2 layer */
  display: block;
  margin: auto;
  width: 100%;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

Yesterday, 01:35 PM	#1
Traveller47 Junior Member Posts: 1 Karma: 10 Join Date: Jul 2026 Device: Kindle Fire HD	Formatting Images I am trying to create an epub using Calibre. The book consists of pages of plain text followed by a large number of images - some portrait format and some landscape format. The problem that I cannot solve is how to force each image onto a new page and arrange for it to fill as much of the page as possible. At present, the portrait images display correctly in full page when the reader is held vertically. The landscape images also display OK but are of course constrained by the width of the screen. However, since each image occupies less than half the screen, the following image pops onto the same page. Also, the landscape images do not resize to fill the screen when the device is rotated. Ideally, I would like all images to display full page Although this would clearly mean the viewer having to rotate their device. Please can anyone offer a solution? I am new to epub creation so the more detail provided the better. All comments appreciated

Yesterday, 08:44 PM	#2
Jaws JCL Punch-Card Collector Posts: 111 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.)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Images & formatting conversion problem	gianni_1	Conversion	3	08-18-2016 07:36 AM
Help! Formatting Internal Images is making me crazy!	Scarmandros	Calibre	11	09-13-2014 04:58 PM
formatting images for kindle hdx	mike pauls	Kindle Formats	4	11-23-2013 05:30 PM
Formatting for Sound and Images	CalissaLeigh	Writers' Corner	0	06-27-2012 04:26 PM

Advert