[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!