resizing in-line images
I've run into a problem. I'm hoping there's a simple answer that I've completely overlooked.
I want to include an image in an ePub between two paragraphs of text. I want it to display in the following way:
* It should resize only proportionally - it should never display stretched or squashed
* It should resize to be as large as possible (optionally up to a fixed limit)
* It should never display partially on one page and partially on another
* If the image display height is shorter than the page height, text should appear above and below the image
* If the image display width is narrower than the page width, it should be centred left/right.
So a tall image might take up the whole of the page, and be centred left/right. A short image would have text above and below it, and might also be centred on a very wide display that's wider than the resize limit.
A simple <img> link can be set to resize to the largest width, with a maximum, and even get centred. But a tall thin image will be resized to be taller than the page area
An embedded svg image has a similar problem, which can be fixed by specifying a height of 100%, but then the image /always/ takes up a whole page, and so short wide images also display on a separate page, with no text above and below them. I want some of my images to be displayed in-line with the text, not always on a separate page.
I think I can work around it, by making an assumption that a page is taller than it is wide, and choosing different options for my pictures depending on their own aspect ratio.
But this will break down for odd cases - e.g. people readin on a device rotated 90 degrees.
Any suggestions gratefully received.
|