Erratic full page image conversion

[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

[Turtle91]

There are several threads here on MR that discuss this topic, but, in short, you can put the image in it's own html page and either use an svg wrapper (my preferred method) or you can use css code similar to what you have above. If you are going to use the css you have above, I would reverse the width/height style to read:

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

It is difficult for some devices to determine to which "height" you refer...even though the standards say it's the height of the container... Some devices refer to the height of the <figure> or <div>, etc. some devices refer to the height of the screen or the "page".
Width is much more reliable. The above css will expand the image to the full screen width and then the height will adjust to keep the aspect ratio. Sometimes this causes the image height to grow larger than the screen so I also add the following as a catch-all:

img {max-width:100%; max-height:100%}

Cheers,

[psychovertical]

Thanks, I'll give that a try.

[jhowell]

I recommend using the SVG wrapper approach.

Setting either height or width to 100% and allowing the other dimension to be automatic will result in image distortion depending on the image and screen dimensions. The max-width and max-height properties are ignored by Kindle devices.