[dibster]

I'm trying to set up an ebook to be formatted like this:

CHAPTER ONE
(Image)
CHAPTER TITLE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam at turpis eu purus pretium tempus. Sed cursus, orci sit amet vehicula rhoncus, massa orci lacinia magna, vel efficitur purus lacus ac lorem. Pellentesque vulputate semper justo, ut tempor magna maximus a. Pellentesque vulputate arcu lorem, in sollicitudin justo euismod ut. Etiam volutpat luctus ante, vel mollis libero faucibus sed. Integer ut tellus vitae nisl venenatis fringilla.

I'm trying to have the very first line of body text start at 50% height of the page of the ebook, no matter the screen size, keep the text size of the chapter headings the same, but resize the image automatically so that the entire heading section takes up exactly half the vertical height of the page. I want to do this so that I can use higher-res images for the book and have it display at a proper size no matter what pixel density the screen has, and not have to customize the sizes for every single chapter (some chapters have longer titles which push the first paragraph lower, and/or the images have different dimensions).

So far, this is the closest I've gotten:

  <div class="center" style="height:50%">

    <h4>CHAPTER ONE</h4>

    <div>

      <img src="images/Ch1.jpg" style="height:100%;"/>

    </div>

    <h2 style="margin-bottom:3em">CHAPTER TITLE</h2>

  </div>

<p>Lorem ipsum dolor sit amet...</p>

This has worked to get the first paragraph to be positioned correctly. Unfortunately though, it sizes the image to be 50% of the page height, not taking into account the text above and below it, causing it to overflow out of the div and overlap with the paragraph below. Adjusting the image height percentage kind of helps, but can still overflow when the page is resized, and it would have to be done manually for each chapter.

Basically, I want the chapter title (plus the 3em margin/padding) to always align to the bottom of the first 50% of the page no matter how long the title is without overflowing below, and I want the image to resize to fill the remaining space, constraining everything into the first div of 50% height.

Is this even possible? I've tried formatting it as a 3-row table as well but couldn't quite get that to work either. Any ideas would be appreciated! I know I'm probably making it more complicated that I need to, and I can format it in alternative ways if need be, but if it's at all possible to do it this way, that would be preferred. Thanks!