View Full Version : Image zoom problem in iBooks

09-13-2010, 06:16 PM
This topic was originally posted ( by whbenson in the Apple Devices forum, but I thought it might be a better fit here. I also wrote a short blog post ( about this issue.

In iBooks, you are supposed to be able to double-tap on an image in order to zoom in on it. This works for images that are simply embedded.

If you want to set images to float left or right so that text wraps around them, and at the same time control the size of the image, this is possible by wrapping the image in a div and controlling the properties of the div:
<div style="float: left; width: 42%">
<img style="width: 100%" src="image.png" />
But if you do this, you can't zoom in on the image any more. Instead, double-clicking on an image simply selects a short chunk of nearby text.

Any ideas on how to get around this problem?

09-14-2010, 05:44 AM
Ask Apple for an update? Apparently they don't support this feature when an image is inside a <div> or perhaps the 'float' is the culprit.

09-20-2010, 07:51 PM
I appreciate your confirming and following up on this issue. The zoom is an especially nice feature because it effortlessly centers and fills the screen and lets you enlarge still further. I was hoping to put photos, notes, diagrams, etc. in a sidebar-like region and let readers zoom if they wanted to see them more clearly.

After trying various ideas without success, I've settled on interrupting the text with what could be called an image bar: a narrow horizontal strip the width of the screen via a div with height 10%, say, and placing the images inside - which scrunches the images way down, but leaves just enough of a target to double tap on.

This does work in iBooks, though there's no scrunching in Sigil. Haven't tried it elsewhere.

09-21-2010, 12:54 AM
It works ok for me.
I have floating images with textwrap and can double tap on it to zoom in and back out. No problem.

xhtml code:
<p class="imageright"><img src="images/Imagename_fmt.jpeg" alt="Imagename.jpg" /></p>

CSS code

p.imageright {
line-height: 1.42em;
font-size: 1em;
margin-bottom: 0.5em;
margin-top: .5em;
text-indent: 0em;
margin-right: 0.5em;
margin-left: 0em;
float: right;
clear: right;
text-align: right;
font-weight: normal;
font-style: normal;
margin: 0 0.5em 0.5em 0;
color: rgb(0,0,0);

09-23-2010, 06:52 PM
Thanks for your example. I tried it on the iPad and it does work there, though still no luck in iBooks on the iPod Touch (iOS4.1), where it would be the most useful.

09-24-2010, 10:48 AM
Thanks for the example. I noticed that in your example you didn't specify the width of the image -- is this because you want the image to display at its true "natural" size on the screen?

In my case, I want images which have a high resolution but display in a small space, allowing the user who zooms in to truly see more detail.

Unfortunately, (as far as I know) in order to size images in iBooks you must put the <img> inside a <div> or similar wrapper, then size the <div>. Apparently iBooks ignores size specifications in <img>. (See Liz Castro's post here (

Somehow, in these situations I end up with most of my images not zooming. Not sure why. I haven't worked on this issue for a while, but I'd still appreciate any suggestions or input.

10-02-2010, 07:41 PM
I've now been able to have such images zoom - on both iPod Touch and iPad - with the simple expedient of nesting a simple <div> directly inside the <body>. i.e. <body><div> ... </div></body>. Haven't tested this extensively, but it's worked with everything tried so far.

Another bit of iBooks lore I happened to discover, is that if you do something like
<a href="../Styles/Style0001.css">hit me</a>, touching the link yields a full screen image of the css text file, which you can spread and pan around as usual. This example from Sigil, and presumably works with any ordinary text file. Any ideas how to use this feature?