View Full Version : Making images expand for iPad


slimblock
03-16-2012, 11:41 PM
Hi, I'm a newbie to all of this really need some help! -- I just made a captioned photo book for Amazon and now I'm making it for iBooks. I'm trying to figure out how to make the photos go bigger when you expand them with you fingers. My files are 1200x1300 pixels but I have them sized in the html pages at 576x624, one per page. So they have plenty there to go bigger, but I'm just not able to figure it out. Thanks for any advice!

SBT
03-17-2012, 07:41 AM
I like to give images a width in %, then it can fill as much of the screen as you wish,independent of screen resolution. E.g. in a css-file:
img.photo { width:95%;}
If I have narrow pictures, I assume a 3x4 screen, and calculate the width accordingly,e.g. if I have an image which is 500px x 1000px, the css is
img#tall-photo {width:65%;}

slimblock
03-17-2012, 03:05 PM
Thanks! That's a clearer way of sizing them than what I was doing.

JSWolf
03-18-2012, 12:47 PM
Just to let everyone know, this is not about the iPad, but about iBooks.

mmat1
03-18-2012, 03:05 PM
If I have narrow pictures, I assume a 3x4 screen, and calculate the width accordingly,e.g. if I have an image which is 500px x 1000px, the css is
img#tall-photo {width:65%;}

ähm, question: isn't the percentage always calculated from the available screen-size ??

SBT
03-18-2012, 06:38 PM
The display width of a tag's contents is calculated on the basis of the physical screen width.
The display height is a whole other kettle of fish, no one seems to quite agree on what 100% height is, except that it is not the screen height. Therefore I calculate the width so that the height is 100% on a 3x4 screen.

The lack of info about physical screen height is a real pain in the neck when it comes to getting images right; don't even get me started on ragged images...

JSWolf
03-18-2012, 10:55 PM
The display width of a tag's contents is calculated on the basis of the physical screen width.
The display height is a whole other kettle of fish, no one seems to quite agree on what 100% height is, except that it is not the screen height. Therefore I calculate the width so that the height is 100% on a 3x4 screen.

The lack of info about physical screen height is a real pain in the neck when it comes to getting images right; don't even get me started on ragged images...

height="100%" is the full height of the screen. So yes, height agrees based on the size of the screen.

SBT
03-19-2012, 06:40 AM
@JSWolf, I beg to differ. Ref. w3cschools reference page for the height attribute:
% Defines the height in percent of the containing block
So according to spec, if you stick an <img> with height:100% inside your <body>, you get... something strange, quite often an image which is as large as the rest of the body content.
If some readers interpret height% in terms of screen height, that's handy (I don't know what abberations Apple adhere to), but it's definitely not universal, and certainly not according to w3c spec.

Jellby
03-19-2012, 12:56 PM
SBT is quite right. We would like "height: 100%" to mean the whole screen height, but that's often not the case, although in some situations/readers it might work.

From my spec readings and research, the best I can say is that "height: 100%" is undefined (unless you have a containing block with some fixed height). Note, also, that percentage in vertical margins are interpreted in terms of the width, so it's sometimes not as easy as it would seem (but it means in this case that a margin of 5% is the same size in all four sides).

mmat1
03-19-2012, 03:48 PM
The display width of a tag's contents is calculated on the basis of the physical screen width.
The display height is a whole other kettle of fish, no one seems to quite agree on what 100% height is, except that it is not the screen height. Therefore I calculate the width so that the height is 100% on a 3x4 screen.


OK, now I understand a bit better what you actually doing.

It would be perfect, if there wasn't the feature on some readers to read in "landscape" mode as well. With no restriction in height, it will perfecly run over the screen-borders if the user changes the direction from portrait to landscape. So I thought about a "max-height", but pocketbook ignores it !....:o (At last it will cause some distortion)

Probably we're now again at the svg-wrapper plot...

JSWolf
03-19-2012, 04:22 PM
With ADE, I can use height="100%" in the <img and it works perfectly as long as the margins are set to 0. I don't know where it's not working. For the iBooks, I can't say if height works or not.