View Full Version : Best way to format images and captions in EPUB


silviolorusso
05-02-2013, 12:44 PM
Hello,

I'm wondering what is the best way to format images and captions in EPUB.
I tried the following but I have a problem when I have a very long image, it goes over the window size in ADE.


<style>
img {
width: auto;
height: auto;
max-width: 70%;
max-height: 100%;
}
div.img {
text-align: center;
page-break-after:always;
}
</style>

<div class="frame img">
<img src="source.jpg" alt="image" />
<p class="caption">Caption</p>
</div>

mrmikel
05-02-2013, 05:06 PM
You are trapping the caption in the div for the picture. This makes more than 100%.

Adjust
05-02-2013, 08:22 PM
Make the image 80% heigh or something to allow for the caption on the same page

silviolorusso
05-03-2013, 05:56 AM
Thanks everyone, the actual problem is not the only the caption, but the fact the image itself goes out of the window in ADE.

Adjust
05-03-2013, 06:26 AM
Can you screen cap your problem so can see?

pdurrant
05-03-2013, 07:25 AM
You've specified the image height, but not the size of the enclosing div. 100% doesn't mean 100% of the screen, it means 100% of the enclosing block.

Try

div.img {
height: 100%;
text-align: center;
page-break-after:always;
}

Jellby
05-03-2013, 08:51 AM
That would be the same, as the <div> is contained in something else (at least <body> and <html>), and those have probably no height defined. Even if they had "height:100%", it's not clear that that should relate to the screen height. It might work, but I don't think it's against the spec if it doesn't.