Controlling Image Size in iBooks on the iPad

I saw the other day that Richard Pipe, who's been documenting some really helpful and interesting tests on his Using ePUB blog, got a question from someone about how to change an image's size in an ePub. Richard kindly responded with some of the code generated from his FLIP ePub generator, which looks quite powerful.

I read through the article with interest, and found exactly the same solution that I had come to on my own: in order to control the size of images in iBooks, you have to change the size of the surrounding div and then set the width of the img element itself to 100%. This is completely non-standard. According to the CSS spec, the width property can be applied directly to replaced elements like images.

And in fact, other ereaders don't have trouble with it at all. Here's a very simple ePub in Adobe Digital Editions. The CSS says: img {width: 100px}. And the image is displayed at 100px:


Here is the very same ePub in iBooks. The sheep are cute, but they're way wider than 100px. In fact, since iBooks ignored the specified width and the original image was too big for the screen, iBooks automatically reduced the image to the maximum for that page: 392 pixels wide. (The original image measured 500 x 305 pixels.)



It looks like iBooks doesn't support the width property applied directly to the img element.

There is a solution. Just wrap the image in a div or some other block-level element (which it should be in already in order for the XHTML 1.0 to validate), and apply the desired size with the width property to the div element. Then, apply a max-width of 100% to the img element. (You can just use width, but the image might get pixelated if the resulting size is larger than the image's original size.) The barebones solution looks like this:

div.illustration {width: 100px}
img {width: 100%}

And that works just fine:


Course, it's generally a bad idea to use pixel widths for images in ereaders. What you really want is a percentage. You just have to remember that percentages used for the width property are always calculated with respect to the parent element (e.g, the screen), not the original size of the image itself. In other words, if you set the div to 50%, it will take up 50% of its parent element's size, not 50% of the size it should have been. Also note that the width property is not inherited.

So, suppose you want to make the image half the size of the screen, no matter how big or small the screen is. In that case, use:

div.illustration {width: 50%}
img {width: 100%}

Now, on a small iPad page (e.g., held horizontally), the image is 50% of the small page:


And on a large iPad page, (e.g., held vertically), the image is 50% of the large screen.


And on a tiny iPhone screen, the image is still 50% of the screen, now all of 141 pixels wide.