What image height causes images to fill the screen?

[karenbryant]

Hi,
I'm using Word to create my ePubs and converting with Alantis. I'm really happy with the results, but I want to understand how the image size works on readers like the Nook. Some of the images in my eBook take up the whole screen when viewing in the Nook and Kobo, leaving the caption on its own on the next screen. What is the image size that causes this to happen? What height should I make all my images to ensure they fit on the ereaders screen, with a little room below for the captions?

Also, does anyone have a good Word Marco that will resize all my images to that height (there are many of them!) and keep the aspect ratio? All the ones I've found on the web seem to have runtime errors.
Thanks in advance,
Kay

[Toxaris]

It all depends on your reader and your font-size of course. If you really want to avoid splitting the caption from the image, include the caption in the images. However, that is never ideal of course. Perhaps, just perhaps, you could place the picture in a SVG wrapper and include the caption in the wrapper.

In general if you make your pictures 600x800 it should fit full screen. However, this is no guarantee.

[karenbryant]

So that's a height of 800 pixels I assume? How do I work that out in word? I think it only shows cm for image size.

[DaleDe]

Originally Posted by karenbryant

So that's a height of 800 pixels I assume? How do I work that out in word? I think it only shows cm for image size.

I believe you can change the units in word. 800 pixels is 800 pixels, there is no direct correlation to cm since that would depend on home big a pixel is however a 6" screen has 167 pixels per inch which can be used to calculate the screen size. It is generally assumed to be 9 cm wide x 12 cm tall approximately. Of course if the picture is full size there will be no room for a caption on the same page and some readers include a banner on the screen which also takes up space, roughly 40 pixels or so.

Dale

[Toxaris]

The best result would be achieved with some post-processing in the ePUB.

[karenbryant]

Thanks for your help, guys.

[Jeff L]

To keep objects together, enclose them within a DIV or P tag and use inline-block.


That is,

In your CSS, have something like this:

.image-and-caption {

display:inline-block

}

Then in your html:

<div class="image-and-caption">
<img alt="text" src="image1.jpg" style="height:90%; text-align:center;"/>

<p>Caption text</p>
</div>


Leaving the "height" at 90% (or whatever is appropriate) will leave enough room for your caption text.

[Jellby]

But note that "inline-block" is not an officially supported value in the epub spec, so don't complain if it doesn't work.