iBooks cutting off the edges of images

radiocure · 01-12-2012, 09:33 PM

Sorry if this is elementary, but I can't seem to resolve it, and it's driving me a bit crazy.

I've got some recent e-books with rather large illustrations, which I'm inserting just like this:

<img src="images/whatever.jpeg" width="100%" alt="something" />

Across all devices there are no issues, but in iBooks the righthand 10 pixels or so are just cut off. Does anyone know what I'm missing?

Thanks a great deal ahead of time. Sorry if this has been covered, but I searched and couldn't find anything relevant.

whbenson · 01-18-2012, 05:53 PM

First, AFAIK, iBooks ignores the width property altogether on the img tag.

But... I was finally able to reproduce what you're seeing by putting "width:100%" on the <body> tag! So maybe you're inadvertently doing something similar?? If so, then just use the default width -i.e. don't use the width property at all.

More details and a few example are at
http://empiricalepub.blogspot.com/20...ntortions.html

-Bill

TravellingTwo · 02-01-2012, 12:59 PM

Did anyone manage to fix this problem? We have the same issue but can't figure out what the fix is.

radiocure · 02-04-2012, 06:46 PM

Quote:

Originally Posted by TravellingTwo

Did anyone manage to fix this problem? We have the same issue but can't figure out what the fix is.

Doesn't seem to be an issue in this case with the <body> tag.

I have had luck putting the image in its own <div>, which solved the problem for most of the images but still leaves a bit (though less) clipped off on some of the images. I have not seen a better solution offered anywhere else, but have seen others post similar problems.

whbenson · 02-06-2012, 12:18 PM

Putting the image in its own <div> is the received wisdom, which has always worked for me. Can you post a small, short, non-drm example showing the problem? Pointers to others with similar problems?
-Bill

01-12-2012, 09:33 PM	#1
radiocure Member Posts: 14 Karma: 10 Join Date: Jul 2011 Device: none	iBooks cutting off the edges of images Sorry if this is elementary, but I can't seem to resolve it, and it's driving me a bit crazy. I've got some recent e-books with rather large illustrations, which I'm inserting just like this: <img src="images/whatever.jpeg" width="100%" alt="something" /> Across all devices there are no issues, but in iBooks the righthand 10 pixels or so are just cut off. Does anyone know what I'm missing? Thanks a great deal ahead of time. Sorry if this has been covered, but I searched and couldn't find anything relevant.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
IBooks display images	sharkbc	Apple Devices	4	07-21-2011 11:22 AM
The Edges Durability	mokel22	enTourage eDGe	16	06-21-2011 07:31 PM
Blue Edges	borisb	enTourage Archive	4	10-07-2010 12:25 AM
Scaled images in iBooks	ckirchho	Apple Devices	5	06-25-2010 05:21 AM
Calibre converted CBZ->EPUB: looks great, but 505 is cutting off edges?	Waba	Workshop	0	03-07-2010 06:31 PM

01-18-2012, 05:53 PM	#2
whbenson Enthusiast Posts: 37 Karma: 493532 Join Date: May 2010 Device: ipad	First, AFAIK, iBooks ignores the width property altogether on the img tag. But... I was finally able to reproduce what you're seeing by putting "width:100%" on the <body> tag! So maybe you're inadvertently doing something similar?? If so, then just use the default width -i.e. don't use the width property at all. More details and a few example are at http://empiricalepub.blogspot.com/20...ntortions.html -Bill

02-01-2012, 12:59 PM	#3
TravellingTwo Member Posts: 10 Karma: 10 Join Date: Apr 2011 Device: Kindle 3	Did anyone manage to fix this problem? We have the same issue but can't figure out what the fix is.

02-06-2012, 12:18 PM	#5
whbenson Enthusiast Posts: 37 Karma: 493532 Join Date: May 2010 Device: ipad	Putting the image in its own <div> is the received wisdom, which has always worked for me. Can you post a small, short, non-drm example showing the problem? Pointers to others with similar problems? -Bill

Advert

Advert