Resizing images in EPUB

Some time ago, a reader wrote to tell me that I had gotten the code wrong for resizing images in my EPUB Straight to the Point book. At first, I thought he was right, but at second and third glance, I realize that he wasn't.

The problem is that the iPad doesn't recognize when you add width information directly to a img element. That is non-standard behavior (read: a bug) and should be fixed.

First, let's look at how CSS deals with images. An image has an intrinsic size, that is, its actual size in pixels. If you don't apply width or height information to the image, either in the HTML or the CSS, the image will appear at its original size. CSS allows you to set the height and the width of an image explicitly in pixels, or as a percentage of a parent element. This means that if you set the width of an image to 50%, the image should be displayed at 50% of the width of the element in which the image is contained, not 50% of the image's original width.

Here's what it looks like in Firefox. The image takes up half of the window width since its ancestor element is the body. So far so good.



Enter iBooks. Unfortunately, iBooks has a bug that ignores a width explicitly set for an img element. Just completely ignores it:



The first part of the solution, as a I describe in EPUB Straight to the Point, is to enclose the img in a div and then set the width of the div to the desired width, either in pixels or as a percentage.

But observe what happens if you remove the width property from the img and apply it to the div that contains the img. In iBooks it (erroneously) works as you want it to:



But iBooks, as we noted, doesn't follow the CSS spec. However, and this is a big however, Firefox, Safari, and Adobe Digital Editions—and all of the ereaders based on ADE, like the Sony Reader and Barnes & Noble Nook—do follow the spec.

The spec says that, by default, if a replaced element, like an image, is too big for its container (say, a div that you've reduced by half) then the image spills out over the edges. That is, it displays just the same. What the spilled out part (the overflow) doesn't do is affect the layout. Which means that any surrounding text just runs over it as if it weren't there. It's ugly.



As you can see, the div has been reduced to 50% of the width of the window, but the image is unaffected. By default, overflow is visible, but doesn't affect the flow of the page, which is why that text just rolls right over it. Ick.

The second part of the solution, (also contained in EPUB Straight to the Point) is to set the width of the img element to 100% of its parent, in this case, the div. Since the div is 50% of the width of the window, and the img is 100% of the div, then the img will also be set to 50% of the window. This works in both iBooks and more standards-compliant ereaders:





At some point, I had suggested using max-width instead of width but that only works in iBooks, not the other ereaders. In other words, it's no solution.