It would really be convenient if there was a "page-height/width" or "screen-height/width" to use in CSS....maybe it'll make it into CSS4???
In the meantime, If I need the image to fill the screen, I just wrap it in SVG. If the device/app you are coding for doesn't support SVG in anything but the cover, then I'd ditch the app...lol....or just have individualized css for images that are wider than tall, and those that are higher than wide.
Code:
div.inline {text-indent:0;
text-align:center;
margin:.25em auto;
page-break-inside:avoid}
div.tall {line-height:5}
div.wide {width:100%}
img {max-width:100%; max-height:100%}
div.wide img {width:100%}
div.tall img {height:100%}
<div class="inline wide"><img alt="" src="../Images/pic.jpg" /></div>
<div class="inline tall"><img alt="" src="../Images/pic.jpg" /></div>
Of course you would have to adjust the line-height to reflect the relative size of the image to the font-size and it doesn't work so well if you are trying to float the image. If you are doing multiple (tons) images within the book then it might be easier to add that style within the individual <div> tags just to keep track of them all. But I'd try and stick to keeping styling in the css if at all possible.
Code:
<div class="inline tall" style="line-height:3em">