05-02-2013, 11:44 AM | #1 |
Enthusiast
Posts: 32
Karma: 10
Join Date: Jun 2011
Device: none
|
Best way to format images and captions in EPUB
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. Code:
<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> |
05-02-2013, 04:06 PM | #2 |
Color me gone
Posts: 2,089
Karma: 1445295
Join Date: Apr 2008
Location: Central Oregon Coast
Device: PRS-300
|
You are trapping the caption in the div for the picture. This makes more than 100%.
|
05-02-2013, 07:22 PM | #3 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
Make the image 80% heigh or something to allow for the caption on the same page
|
05-03-2013, 04:56 AM | #4 |
Enthusiast
Posts: 32
Karma: 10
Join Date: Jun 2011
Device: none
|
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, 05:26 AM | #5 |
Addict
Posts: 351
Karma: 70000
Join Date: Jul 2010
Location: Australia
Device: ADE, iPad
|
Can you screen cap your problem so can see?
|
05-03-2013, 06:25 AM | #6 |
The Grand Mouse 高貴的老鼠
Posts: 71,663
Karma: 306652114
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Voyage
|
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 Code:
div.img { height: 100%; text-align: center; page-break-after:always; } |
05-03-2013, 07:51 AM | #7 |
frumious Bandersnatch
Posts: 7,517
Karma: 19000001
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
|
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.
|
Tags |
epub, html, image, picture |
Thread Tools | Search this Thread |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Epubs: keeping images and captions together | verydeepwater | ePub | 13 | 12-02-2012 04:33 PM |
Images and captions in epub | Balaji | Workshop | 3 | 08-19-2011 08:00 AM |
captions and images together | detede | Apple Devices | 11 | 06-14-2010 09:00 PM |
E-book format that supports images? | scarab1 | Workshop | 11 | 03-05-2010 03:21 AM |
Best format in DR1000s for Images? | alxwang | Workshop | 2 | 05-12-2009 11:26 AM |