SCALING IMAGES.
This is best accomplished with a combination of attributes on the img element, and attributes on an enclosing div or span.
For my drop caps, I code the image and text like this:
<p><span class="dropcap drop1"><img alt="I" src="../images/img0001.jpg" /></span>T being the fashion of the day to present to the public divers affecting and pathetic histories, each vying with the other in veracity and profusion of incident, I am persuaded, dear reader, that the time is now propitious to recount the dramatic fortunes of Desbarollda, the waltzing mouse.</p>
with the css looking like this:
span.dropcap { float:left; margin-top: 0.2em; margin-right:0.5em; }
span.dropcap img {width: 100% }
span.drop1 { width:10.9em; max-width: 60%}
( I've split the styling of the dropcap span into a general and specific, as my drop cap images are different widths. I couldn't specify using the height (which is the same for all of them) as then I couldn't have limited the width using max-width, as it would then resize non-proportionally in some circumstances.)
For in-line image where I don't want the text to flow around the images I've used
<div class="inline"><img alt="" src="../images/img0006.jpg" /></div>
with CSS of
div.inline { page-break-inside:avoid; margin: 0.5em 0 0.5em 0; text-indent: 0; text-align:center; clear:both }
div.inline img { max-height:100%; max-width:100%; }
Although none of the readers seem to handle the max-height:100% correctly, so it can end up (with tall thin images) with the image not fitting entirely on the screen.
It is possible to get an image to properly resize to fill the page using an svg wrapper.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 573 800" preserveAspectRatio="xMidYMid meet">
<image width="573" height="800" xlink:href="../images/img0032.png" />
</svg>
which I use for the cover image. It's a good idea to also specify in the CSS
body {margin:0; padding: 0; border-width: 0; }
@page {margin: 0; padding: 0; border-width: 0; }
to make sure there's no white-space around the cover image.
IMAGE DIMENSIONS AND COMPRESSION
Most ePub reading devices have screens of 600x800 or more. So for a full-screen graphic, these are the dimensions I'd be aiming at. Don't compress too much in JPEG. Storage is cheap. For ePub I'm intending to use PNG instead of JPEG. Storage is cheap.
WRAPPING AROUND INLINE GRAPHICS
This is possible, see the drop cap example above. More complicated wrapping is also possible. See the Alice in Wonderland sample hereabouts.
There's also been lots of discussion on this subject - search the ePub forum
Quote:
Originally Posted by hapax legomenon
SCALING IMAGES. how do I plan for image dimensions in relation to the viewing area? Do reading systems automatically scale images? If yes, how do they figure out the optimal image dimensions to use? I want to prevent the image from encompassing 99% of the page (for example)?
IMAGE DIMENSIONS AND COMPRESSION. I took a look at Jelby's excellent Prince and the Pauper epub file https://www.mobileread.com/forums/showthread.php?t=34347, and I see that the cover is 600x800 (136KB) while the other jpegs max at 540x600 (123KB), while a lot of them are under 50K. Aside from the fact that this ebook has a lot of grpahics, are these guidelines good rules of thumbs?
WRAPPING AROUND INLINE GRAPHICS. In the ebooks uploaded, I don't recall seeing any images which are floated into the paragraphs. Is this css selector not supported or workable in reader systems?
If you don't float graphics, then any image will add extra white space. That's what I'm trying to avoid when I use images. What thoughts do you have?
Thanks for your help.
Hapax |