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

05-02-2013, 12:44 PM

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.

img {
width: auto;
height: auto;
max-width: 70%;
max-height: 100%;
div.img {
text-align: center;

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

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

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

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.

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

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.


div.img {
height: 100%;
text-align: center;

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.