View Single Post
Old 09-13-2009, 10:26 AM   #1
pdurrant
The Grand Mouse 高貴的老鼠
pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.pdurrant ought to be getting tired of karma fortunes by now.
 
pdurrant's Avatar
 
Posts: 74,151
Karma: 315558334
Join Date: Jul 2007
Location: Norfolk, England
Device: Kindle Oasis
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.
pdurrant is offline   Reply With Quote