Image Alignment Issues

[AndrewCanada]

Good evening,

I am working on my eBook (AZW3 format) and it has a number of portrait images. I am trying to format them such that they have a height of 50% of the page, are scaled with the original aspect ratio, and are centred horizontally.

HTML:

<div class="calibre35"><img class="calibre35" src="../images/00033.jpeg"/></div>

CSS:

.calibre35 {
  height: 50%;
  text-align: center;
}

Unfortunately with this code, everything looking great in the ebook-edit program preview window but when I load the file onto my Kindle Paperwhite it's a mess. 1 image might be the correct size and centred, another might be ~80% height and centred, and others might be 50% height but 100% width (stretched horizontally). Yet all of these files are the same dimensions and use the same HTML and CSS classes.

What am I doing wrong?!

[kovidgoyal]

Your best bet is SVG, or alternately using viewport units, though I dont recall if the Kindle renderer supports them

[deback]

.calibre35 {
height: 50%;
text-align: center;
}

You can't have both of the above lines in the same class. Create another class for the text-align line.

Examples:

<div class="calibre36"><img class="calibre35" src="../images/00033.jpeg"/></div>

.calibre35 {
height: 50%;
width: 50%;
}

.calibre36 {
text-align: center;
}