That does work very well. And in Safari the height restriction (limiting the image to the height of the browser window) does also work, so one can hope that in future ePub reader implementations it should work better.
And it's a lot simpler than my attempt with svg. I'll adopt this solution.
I'd add a few things to div.illustration, as I need to sometimes clear a drop-cap image, and I default to a text indent:
div.illustration {
text-indent: 0;
text-align: center;
clear: both;
}
Oh - the one thing this doesn't do is expand the illustration in case of larger page sizes. But since I was going to limit the scaling up to the actual pixel size of the image anyway, it doesn't worry me for this case.
It would be nice to have something that worked properly with SVG images though, for cases when the illustration is vector and could scale up for bigger screens without a problem.
|