Perhaps this css is better:
Code:
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%;
}
/* Image size: 1400 x 1998 */
/* Height of the wide part: 885 */
/* Width of the narrow part: 645 */
div#cheshire {
width: 20em; /* w */
max-height: 12.6em; /* (885/1400)*w */
}
div#cheshire + div.leftpic {
width: 9.2em; /* (645/1400)*w */
height: 15.9em; /* ((1998-885)/1400)*w */
margin-top: -0.5em; /* -m */
}
Now the div's are stacked vertically, which allows a nicer resizing of the document's width (below the image width). I think it can be easily adapted to any kind of L shape.