The problem is that the iPad doesn't recognize when you add width information directly to a
imgelement. 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
imgelement. Just completely ignores it:
The first part of the solution, as a I describe in EPUB Straight to the Point, is to enclose the
divand then set the width of the
divto the desired width, either in pixels or as a percentage.
But observe what happens if you remove the
widthproperty from the
imgand apply it to the
divthat 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
divthat 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
divhas 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
imgelement to 100% of its parent, in this case, the
div. Since the
divis 50% of the width of the window, and the
imgis 100% of the
div, then the
imgwill 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
widthbut that only works in iBooks, not the other ereaders. In other words, it's no solution.