So... I used the the html/body 100% approach, and there were a couple idiosyncracies...
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
p.imagefull {
display: block;
height:100%;
text-align: center;
margin: 0;
padding: 0;
}
.imgfull {
height: 100%;
width: auto;
}
</style>
</head>
<body>
<p class="imagefull"><img src="../Images/00.jpg" class="imgfull"/></p>
</body>
</html>
In Sigil and PageEdit, this appeared to work except the image extended a few pixels below the window; setting the height in ".imgfull" to 99% seems to fix this, but i don't know why 100% is, well, more than 100% of the screen height. Additionally, if i narrow the window to the point that so that its narrower than the image, instead of shrinking the image to fit the window, it just adds a horizontal scrollbar. (see fullpageimg1.jpg)
In Calibre, narrowing the window beyond the image's natural dimensions doesn't resize the image, but rather smooshes it (see fullpageimg2.jpg). Otherwise, it seems to work like Sigil/PageEdit
Now, bearing in mind that the perhaps an svg wrapper would work differently, I'm still curious why THIS didn't work. Is there something funky in my styling? Or something missing? And why do Sigil and Calibre render this differently?
[NOTE: attached images are with the height for "imgfull" set to 99%, not 100%]