EPUB -> AZW3 images get squished

[Siavahda]

Hey all, I'm trying to convert an EPUB file that uses small images for scene breaks. But when I convert to AZW3, those images turn huge (take up a whole page) and are squished all narrow. So it looks like a dark line down the centre of the screen.

Both the EPUB and AZW3 files look perfect when viewed using the Calibre Viewer, but when the file goes onto my Kindle (Paperwhite 3) the images get weird.

I tried changing the height and width of the image to 50% but all that got me was a shorter line.

The original image is 70 x 64 px.

I tried converting to a MOBI file and the images displayed perfectly, but I'd like to figure out what's happening in the AZW3 conversion in case it comes up again. Anyone have any thoughts? (If you do, please explain as simply as possible, I am NOT the tech-savviest!)

[JSWolf]

Originally Posted by Siavahda

Hey all, I'm trying to convert an EPUB file that uses small images for scene breaks. But when I convert to AZW3, those images turn huge (take up a whole page) and are squished all narrow. So it looks like a dark line down the centre of the screen.

Both the EPUB and AZW3 files look perfect when viewed using the Calibre Viewer, but when the file goes onto my Kindle (Paperwhite 3) the images get weird.

I tried changing the height and width of the image to 50% but all that got me was a shorter line.

The original image is 70 x 64 px.

I tried converting to a MOBI file and the images displayed perfectly, but I'd like to figure out what's happening in the AZW3 conversion in case it comes up again. Anyone have any thoughts? (If you do, please explain as simply as possible, I am NOT the tech-savviest!)

Load the converted eBook into the calibre editor and copy/post the HTML code for the scene break and the appropriate CSS so we can see what's going on.

[Siavahda]

<div class="_idgenobjectlayout1">
<div id="_idContainer009" class="calibre3">
<img alt="" class="_idgenobjectattribute" role="presentation" src="../images/00006.png"/>
</div>
</div>



._idgenobjectlayout1 {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: block;
text-align: center;
margin: 0;
padding: 0;
}
.calibre3 {
border-bottom-width: 0;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
display: inline-block;
height: 1em;
width: 1em;
margin: 0;
padding: 0;
}
._idgenobjectattribute {
height: 50%;
width: 50%;
}

Hope I've done that right.

[Quoth]

height or width (never both) should be auto; unless you are using correct ratio of px, so _idgenobjectattribute is wrong unless the image is 1:1 (square).

Also calibre3 likely should have no height or width setting, or should be scrapped entirely.

[Siavahda]

Removing the height + width from calibre3 made the image a lot bigger in the editor (maybe three times the size, very rough estimate). Also set width to auto in _idgenobjectattribute, since the image isn't a square.

Went ahead and put it on the kindle - now it displays properly (as in, not a squished-together dark line, I can see it's a little spiral thing) but it still takes up about half the page.

[JSWolf]

Originally Posted by Siavahda

Removing the height + width from calibre3 made the image a lot bigger in the editor (maybe three times the size, very rough estimate). Also set width to auto in _idgenobjectattribute, since the image isn't a square.

Went ahead and put it on the kindle - now it displays properly (as in, not a squished-together dark line, I can see it's a little spiral thing) but it still takes up about half the page.

Leave width as 1em and delete the height.

Also, what's the code look like in the ePub?

[Siavahda]

Set the width as 1em in _idgenobjectattribute, deleted the height. It worked! The image looks fine now, it's tiny the way it's almost certainly supposed to be.

It did make everything else using _idgenobjectattribute tiny as well, but I can live with that. Thank you so much!

The CSS in the EPUB file;

<div class="_idGenObjectLayout-2">
<div id="_idContainer007">
<img alt="" class="_idGenObjectAttribute-1" role="presentation" src="image/shutterstock_81955303-2_vine2.png"/>
</div>
</div>


div._idGenObjectLayout-2 {
text-align: center;
}
img._idGenObjectAttribute-1 {
height: 100%;
min-width: 100%;
width: 100%;
}