scaling images for Kindle on iOS

[AlanHK]

I have an image used as a section divider between paras of text.
I wanted it to be 1.5 times the height of body text.

The image is a png, 145x150 pixels.

I make an ePub using this code:

<div>
<img alt="*" class="section" src="../Images/sword.png"/>
</div>

and the css defn is
.section {
height: 1.5em;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 2em;
}


This works fine in epub. I convert to mobi using Amazon's Kindle Previewer.
This also works fine on Kindles and Mac Kindle readers.

But in iOS on iPad and iPhone, the image is apparently not scaled and appears full size, or at any rate much larger than 1.5 em.


How then do I make it scale on iOS as well?

[jhowell]

Are you side loading a MOBI file to the Kindle for iOS app? If so, then don't do that. The iOS app doesn't support the newer KF8 format and will fallback to the older, less flexible format contained in the MOBI file created by the previewer. You need to instead create and side load an AZK file.

ETA: If you still want to use the MOBI then you may be able to make it work by specifying width instead of height. I believe the older format supports that.

[AlanHK]

Originally Posted by jhowell

Are you side loading a MOBI file to the Kindle for iOS app?

Thanks.
Yes, that's what I've been doing.

So I tried making an AZK.
I don't have an iOS device so I have to send it to someone to test, will know if it works tomorrow.

Is there any way to preview AZK without an actual iOS device?

In spite of having a huge program folder 500 MB in size, the stupid Kindle Previewer doesn't preview AZK. I remember an earlier version did.

Originally Posted by jhowell

specifying width instead of height.

I'll try that too.

I was wondering if it was the units, ems are understood okay in mobi and azk?

[Notjohn]

Is there a reason you don't use margin-top to achieve this result? Seems more straightforward, and doesn't run the risk of looking odd if a reader should choose white on black for some reason.

[AlanHK]

Originally Posted by Notjohn

Is there a reason you don't use margin-top to achieve this result? Seems more straightforward, and doesn't run the risk of looking odd if a reader should choose white on black for some reason.

The image isn't (just) a spacer, it's a Chinese character specified by the publisher.

[Notjohn]

Ah! Sorry.

(I do use small images for publisher's colophon -- one of them a Chinese character, in fact -- and I once used a hand-drawn sunburst as a section break in a novel. I kept the physical dimensions small. Worked great on the KF8 devices, acceptable (though just barely) on the old KF7 devices. I am less certain about IOS, though they look fine on my iPhone 4.)

[AlanHK]

Originally Posted by Notjohn

I kept the physical dimensions small.

I'll try making the image itself smaller so it looks OK at 100%.