MobileRead Forums - View Single Post - resizing in-line images

pdurrant · 09-13-2009, 10:26 AM

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.

09-13-2009, 10:26 AM	#1
pdurrant The Grand Mouse 高貴的老鼠 Posts: 74,167 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.