EPub graphics are not sized correctly

Question

ePub graphics are not sized correctly after transfering ePub to my iPad using iTunes.
I am running indesign 6.0 on microsoft system 7 and transfering the ePub to my new iPad (32gb  2048 x 1536 resolution).
The graphic is set for "custom rasteration" with size set to "relative to page width".
The graphic displays correctly in Adobe Digital Editions but when I transfer the ePub to my iPad it appears full size.
If i set the cover to "Rasterize first page" the graphic on the cover is sized correctly but the graphic in the document is full size.
When i create the identical file using inDesign 5.5 everything works correctly.
What am i doing wrong or what setting am I not setting correctly?
Thanks,
Dennis

Answer 1

Welcome to the world of how different EPUB readers handle the same HTML and CSS code.
I just did a test with a picture which had the Relative to Page Size and Custom Rasterization settings from InDesign CS5.5  and CS6.
As far as I can tell each version of InDesign is writing the correct code but in a different way. ADE responds to it the same, but iBooks on your iPad does not.
Here are the details: I created a 45 pica wide text frame and anchored a 14 pica wide graphic frame.
InDesign CS5.5 exports the relative size as part of the image tag like this:
<img width="31%" src="images/CMYK%20balloons_fmt.jpeg" alt="CMYK%20balloons.psd" />
InDesign CS6 creates a class for the <div> tag for the graphic frame and references it in the CSS it creates. Here's the HTML:
<div class="frame-2">
<img class="frame-1" src="image/CMYK%20balloons_fmt.jpeg" alt="CMYK%20balloons.psd"
                                         />
</div>
Here's the CSS for frame-1:
img.frame-1 {
     width : 27%;
I would say that both of those are correct code. However, iBooks handles the CS6 version differently.
Here's how the CS5.5 version looks in iBooks:
And here's how the CS6 code looks:
It handles it differently. So I'd say, if it's important that on the iPad, that it be smaller, you should edit the code to insert the scaling attribute into the HTML tag instead of the CSS,