[RbnJrg]

Originally Posted by ElMiko

@RbnJrg - I assume you're referring to this post?

Yes, I am.

If so, I had read it (and just reviewed the attached test files), but it's a bit different from what I'm talking about. Specifically, in your example you are setting image height and width to 100%, whereas I'm setting the width to "auto".

No, in my examples, you need to pay attention where I said: "But by employing a svg wrapper all problems disappear:". The others examples show issues due to not using svg wrappers. Since you want a full page image, then you must use the code I employed in my Temporal3.epub attached to that post. There, I never use "width: 100%". Alternatively, instead of the code used in the stylesheet for that epub, you can use the following:

body {
  margin: 0;
}

.myFullHeight {
  height: 100%;
}

@supports(height:99vh) {
  .myFullHeight {
    height: 99vh;
  }
}

Both of those codes give the same output; the original one included in Temporal3.epub and the above alternative one. When you set a value to "height", "width" is "auto" by default. So to write:

.myDiv {
   height: 100%;
   width: auto;
}

is the same as to write:

.myDiv {
   height: 100%;
}

Moreover, as I said in my previous post, part of what's confusing me is that it renders differently between Sigil/PageEdit and Calibre. The distortion you describe in your recent example (again, because the code is slightly different) isn't really what I'm referring to (or at least, I don't think it is...). In my example, Sigil/PageEdit doesn't distort the image at all, it just refuses to resize if the window gets too narrow (which i think may be what you were referring to in your first post). Whereas in Calibre it doesn't stretch or scroll, but it will compress when the window gets too narrow.

I understand you, you don't understand me. AGAIN, USE A SVG WRAPPER!!!!! And all your issues will disapear.

Separately, the issue of 100% height rendering as slightly more than 100% of the window height.

Employ the code of my Temporal3.epub and you won't have more issues. But if you also want to have the image centered in the screen, not matter the ereader, employ the more elaborated code I posted at the end of this post:

https://www.mobileread.com/forums/sh...39&postcount=7

Of course, in all what I wrote above, I was assuming you're working for a full-page image, with no text before or after it on the same page (otherwise you wouldn't have used html, body {height: 100%}). If there is text before or after the image (on the same page) then you have to use the following code:

1. In your .css stylesheet:

.myFullHeight { /* This is for RMSDK rendering engines */
  height: 99%;
}

@supports(height:98vh) { /* This is for Readium/Webkit rendering engines */
  .myFullHeight {
    height: 98vh; /* Here you also could try with 95vh */
  }
}

2. In your .xhtml file:

<p>blah, blah, blah,...any extension of text</p>

<div class="myFullHeight">
     <svg xmlns="http://www.w3.org/2000/svg" height="100%" preserveAspectRatio="xMidYMid meet" version="1.1" viewBox="0 0 XXX YYY" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
      <image height="YYY" width="XXX" xlink:href="../Images/your_image.jpg"/>
    </svg>
</div>

<p>blah, blah, blah,...any extension of text</p>