there's an error in your css
img.image {
"max-height: 100%"
}
should be
img.image {
max-height: 100%;
}
the other things is that that style (max-height) would be applied that to an image with the class "image", rather than the divs you've made with the class "image".
i would scrap the max-height, and use something like this:
css:
.imgwrap { height: 95%; width: 100%; text-align: center; }
.img_fullheight { height: 100%; }
html:
<div class="imgwrap"><img class="img_fullheight" /></div>
the div will size to 95% of the viewing area, and then the image will size to 100% of the div.
it'd be good to look at some css tutorials if you're making more books. w3c schools is probably a good start:
http://www.w3schools.com/css/
good luck