Best way to format images and captions in EPUB

silviolorusso · 05-02-2013, 11:44 AM

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>

mrmikel · 05-02-2013, 04:06 PM

You are trapping the caption in the div for the picture. This makes more than 100%.

Adjust · 05-02-2013, 07:22 PM

Make the image 80% heigh or something to allow for the caption on the same page

silviolorusso · 05-03-2013, 04: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, 05:26 AM

Can you screen cap your problem so can see?

pdurrant · 05-03-2013, 06: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

Code:

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

Jellby · 05-03-2013, 07: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.

05-02-2013, 11:44 AM	#1
silviolorusso 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-03-2013, 06:25 AM	#6
pdurrant The Grand Mouse 高貴的老鼠 Posts: 74,432 Karma: 318076944 Join Date: Jul 2007 Location: Norfolk, England Device: Kindle Oasis	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; }

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

05-02-2013, 04:06 PM	#2
mrmikel 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
Adjust 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
silviolorusso 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
Adjust 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, 07:51 AM	#7
Jellby frumious Bandersnatch Posts: 7,570 Karma: 20150435 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.