[Hitch]

Originally Posted by eggheadbooks1

I'm trying to help an elderly friend who has written a book for her kids and wants to be able to give it to them as an ePub. Problem is, she has an iPad and uses iBooks while her children use a mix of iPads (various generations) and Android tablets, and has no idea which of the myriad of ePub apps they might be using.

Apple dictate that all images must be placed in containers (to work around the bug they refuse to fix) and they ask for images to be coded as:

HTML:
<div class="image-container">
<img src="images/bears.jpg" alt="three bears peer at goldie locks"/>
</div>

CSS:
img {height: 100%;}
.image-container {height: 100%;}

(Note: they actually ask for "height: 100vh", but nothing else I know of reads vh so I use %, which iBooks still reads.)

I also added a second image container for horizontal images:

.image-container2 {width: 100%;}

Problem is, the code works only for vertical images: horizontal images are stretched (distorted) to 100% screen height because of the (stupid) img value.

If one changes the img value to 100% width, then horizontal images work but not vertical.

How, then, does one code as Apple dictates but have both vertical and horizontal images in your ebook?

I tried to fix the problem by removing the img value from the CSS and creating classes I could add to divisions and to the img tag:

CSS:
.imageV {height: 50%; text-align:center; margin-bottom: 1em;}
.imageH {width: 100%; text-align:center; margin-bottom: 1em;}
.imageC {height: 100%; text-align:center;}
.vertical {height:100%;}
.horizon {width:100%;}

HTML:
<div class="imageV">
      <img class="vertical" alt="child" src="../Images/child.jpg"/>
    </div>

<div class="imageH">
      <img class="horizon" alt="mother" src="../Images/mother.jpg"/>
    </div>

Well, this works great in ADE, Aldiko, Kobo, but not in iBooks because it ignores the class in the img tag. The horizontal images work but not the 50% vertical ones. Those are ballooned up to the full screen even though the container is only 50% of the screen.

Help!

Well...here are my questions. You're setting 100%, as the width/height, of the images? Not max-width, or max-height, but simply height:100%? So, you are setting the image to be 100% of the containing div, which is also 100%? (for the landscape images). Have you tried using max-width, to control what's happening with those landscape images?

If memory serves, there were issues with the first-gen iPad, too, surrounding images. I think I'm correct when I say that we worked around it by embedding the images in not 1, but 2, divs. The first one set the h/w of the area, the second was to set the size of the image itself, and THEN we put the image inside the nested div, at 100% max-height/width. (So, 100% div, with an X% div inside, say, 50% in this instance, and then 100% max-width for the image, inside that 50% container div. See what I mean?)

Have you tried either doing that--two divs and a nested image tag--or using max-height/width?

And SVG may well be your answer, but I wanted to ask about the nested divs and the max-XXX factors.

Hitch