MobileRead Forums - View Single Post

Jellby · 02-23-2011, 07:20 AM

You have to specify a fixed width to the <div> enclosing both the image and caption. Sadly, there's no way (that I know of) of passing the image's natural width to the <div>, but you can have something like:

Code:

<div class="illustration" id="ill-1">
<img src="image-01.jpg" alt=""/>
<p class="caption">Caption.</p>
</p>

with:

Code:

div.illustration { float: left; margin: 1em; }
div#ill-1 { width: 20% } /* or 240 px, or 10em, or whatever */
div.illustration img { max-width: 100% }
p.caption { ... }

It's not perfect, but it might help.

02-23-2011, 07:20 AM	#127
Jellby frumious Bandersnatch Posts: 7,516 Karma: 18512745 Join Date: Jan 2008 Location: Spaniard in Sweden Device: Cybook Orizon, Kobo Aura	You have to specify a fixed width to the <div> enclosing both the image and caption. Sadly, there's no way (that I know of) of passing the image's natural width to the <div>, but you can have something like: Code: <div class="illustration" id="ill-1"> <img src="image-01.jpg" alt=""/> <p class="caption">Caption.</p> </p> with: Code: div.illustration { float: left; margin: 1em; } div#ill-1 { width: 20% } /* or 240 px, or 10em, or whatever */ div.illustration img { max-width: 100% } p.caption { ... } It's not perfect, but it might help.