Quote:
Originally Posted by pdurrant
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. |
I realize this thread is old but what you've described here is exactly what I'm trying to achieve. I want images to flow properly. I want them to scale smaller if they're bigger than the page size (viewport), and I want them to have text above and below if they're respectively smaller than the viewport.
I could care less at this point about width, as long as the image scales to fit and doesn't get cut off. I have some image and video heavy eBooks and my images are breaking in multiple eReaders across multiple pages (iBooks, Kobo, Sony/Bluefire). They should never break, but they should always scale to fit the viewport.
The way I'm seeing it, the max height issue is... one problem. Where the image has nothing to "grab onto"... in that, the eReaders aren't really expressing their viewport height that we can lean max height against. eReaders should handle max height by relating it to the vertical size of the viewport... not the screen size. The screen size isn't the content area. The viewport is, which is effectively the page.
I've been reading on the SVG wrapper solution... does anyone have any other comments about this or another solution?