Quote:
Originally Posted by fluoresce
Thanks, JSWolf.
I'm pretty sure that the images are not high resolution. I don't know about that kind of stuff. They're probably 72 PPI. In terms of pixels, they range from 300px to 600px.
Does this mean that they will look terrible on high-res screens?  |
Not necessarily. Although hi-res images on a hi-res screen are awesome, they aren't always necessary - and can actually make the eBook WAY too large in file size. You can code the image so it doesn't look all blurry when it gets stretched out. The down side is that the images will appear smaller (take up less realestate) on a hi-res device.
I would try and stay away from using "height:xx%" as the height value is not reliable. It is supposed to refer to the height of the parent element, but what exactly is that height?? Is it the size of the div, the screen, the page, the file??
You can set the css for an image to have a certain width in %, but then tell it to have a maximum width to prevent overstretching. Then the height will scale as necessary to keep the proper aspect ratio - defining BOTH height and width isn't necessary. Here is an example:
Code:
<div class="image1"><img alt="" src="../Images/img_1.jpg" /></div>
<div class="image2"><img alt="" src="../Images/img_2.jpg" /></div>
<div class="image3"><img alt="" src="../Images/img_3.jpg" /></div>
etc.
CSS
div.image1 {margin: 2em auto; width:80%; max-width: 500px} /* actual width in pixels of img_1 */
div.image2 {margin: 2em auto; width:80%; max-width: 490px} /* actual width in pixels of img_2 */
div.image3 {margin: 2em auto; width:80%; max-width: 621px} /* actual width in pixels of img_3 */
Also...there really is no need to put anything into the alt="" portion of the <img> tag unless you have something you want specifically read by a TTS device.
IMHO, Marvin is the best eReader app on iOS, but it is not the widest used. The creator did a really good job at rendering ePubs the way they should be.
Cheers,