View Full Version : How to specify imagesize in epub


ImageSize
02-09-2013, 03:42 PM
Hallo,

I used Abby Finereader to create a epub document. There are some images in it. Aldiko shows them very small, so you can't see anything. Opened with ezpdf-Reader the Images are bigger and readable.
I know epubs are zips and I think I have to edit main.css to get the Images bigger. But I don't know what to do, it is my first edit of an epub.
Please tell me what to do.

Thank you very much for help.

Tex2002ans
02-12-2013, 04:08 AM
I used Abby Finereader to create a epub document. There are some images in it. Aldiko shows them very small, so you can't see anything.

You will have to open the EPUB and edit the HTML directly (most of us use Sigil to edit EPUBs).

Finereader creates inline HTML for the width/height of the image in this format:

<p><img alt="" src="../Images/NameofImage.png" style="width:###pt;height:###pt;" /></p>

If you want to stop the images from being forced into a certain size, you have to remove the section in red. Removing this code will make the image take up its original resolution. In my experience with Finereader, this resolution is at least 1000+ pixels on each side... which is too large for most ereaders.

If you wanted the image to stretch to the width of the reader, you will have to insert code such as this:

<div><img alt="" src="../Images/NameofImage.png" width="100%" /></div>

or you can then stretch all images in the EPUB by adding by adding into the CSS:

img {
width: 100%;
}

ImageSize
02-13-2013, 02:24 PM
Thank you very much. I've made it.
<div><img alt="" src="../Images/NameofImage.png" width="100%" /></div>
This version always stretches the image to 100 %. Thats not what I want.
Also that: img {
width: 100%;
}
But img {
max-width: 100%;
}
should do it. I write should, because Aldiko has a bug, where this doesn't work.

So the workaroud for Aldiko that it shows the images in the right size is to add to each <img> tag
style="max-width:100%"
Example: <img src="main-7.png" alt="" style="max-width:100%"/>
Now it works even with Aldiko. You can use Notepad++ and the function replace in files.
<img src=(.*?) style=(.*?)/>
<img src=\1/>
This is the first Regex. With that you remove the
style="width:###pt;height:###pt;" which makes Abby.

After that you use
<img src=(.*?)/>
<img src=\1 style="max-width:100%"/>
And now all your images are correctly displayed.