Yet another solution, now with javascript
:
Code:
<html>
<head>
<style>
div.leftpic {
float: left;
clear: left;
text-align: left;
margin: 0 0.5em 0.5em 0; /* 0 m m 0 */
}
div.leftpic img {
width: 100%;
}
div#cheshire_1 {
width: 70%;
}
div#cheshire_2 {
display: none;
margin-top: -0.5em; /* -m */
}
</style>
<script language="javascript" type="text/javascript">
function resize() {
/* Image size: 1400 x 1998 */
/* Height of the wide part: 885 */
/* Width of the narrow part: 645 */
var ches1=document.getElementById("cheshire_1");
ches1.style.maxHeight = Math.round(ches1.offsetWidth*885/1400);
var ches2=document.getElementById("cheshire_2");
ches2.style.display = "block";
ches2.style.width = Math.round(ches1.offsetWidth*645/1400);
ches2.style.height = Math.round(ches1.offsetWidth*(1998-885)/1400);
}
</script>
</head>
<body>
<p>
<div class="leftpic" id="cheshire_1">
<img src="Alice-23.jpg" alt="Alice talks to Cheshire Cat"/>
</div>
<div class="leftpic" id="cheshire_2"></div>
<script language="javascript" type="text/javascript">resize(); resize();</script>
So she set the little creature down, and felt quite relieved to see it trot away
quietly into the wood. 'If it had grown up,' she said to herself, 'it would have
made a dreadfully ugly child: but it makes rather a handsome pig, I think.' And
she began thinking over other children she knew, who might do very well as pigs,
and was just saying to herself, 'if one only knew the right way to change
them—' when she was a little startled by seeing the Cheshire Cat sitting
on a bough of a tree a few yards off.
</p>
</body>
</html>
Features:
- The image width can be set relative to the page width
- If javascript is not supported or if it is disabled, normal rectangular image wrapping occurs.
- In Opera, the page has to be reloaded if the size changes, in order for the rewrapping to take place. Doing this automatically would depend on the events supported by each reader.
- I call resize() twice in a row because sometimes it may be needed if a scrollbar appears or disappears.
Now the question is, is javascript part of ePUB?
