[psychovertical]

Hi

I've created a very large book in epub format that validates etc, which features a large number of full screen images (png diagrams and jpg images). The same code is used for all images which is:

  <figure class="h-100 no-margin align-center">
          <img class="portrait" src="../Images/pp8.jpg" alt="descent-339" />
    </figure>

The height of figure is 100% and the portrait class is (CSS taken from Blitz framework) :

img.portrait {
  width: auto;
  height: 100%;
}

Now this works great in epub, and when converted by Kindle preview it also works, but not every time, with maybe 1 out of 10 images being smaller, sometimes 90% of the height, others only 30%. The strange thing is, if I past the same chunk of code five times (same code and image), some will be full page while one won't be. I've been fighting this for a week now, and could just publish as is, but it seems like I'm just missing something small that will allow all images to be full screen.

Can anyone help?

Thanks

Andy