10-15-2018, 05:41 PM | #1 |
Junior Member
Posts: 4
Karma: 10
Join Date: Jun 2011
Device: kindle
|
Erratic full page image conversion
Hi
I've created a very large book in epub format that validates etc, which features a large number of full screen images (png diagrams and jpg images). The same code is used for all images which is: Code:
<figure class="h-100 no-margin align-center"> <img class="portrait" src="../Images/pp8.jpg" alt="descent-339" /> </figure> Code:
img.portrait { width: auto; height: 100%; } Can anyone help? Thanks Andy |
10-15-2018, 06:54 PM | #2 |
A Hairy Wizard
Posts: 3,094
Karma: 18727053
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
|
There are several threads here on MR that discuss this topic, but, in short, you can put the image in it's own html page and either use an svg wrapper (my preferred method) or you can use css code similar to what you have above. If you are going to use the css you have above, I would reverse the width/height style to read:
img.portrait { width: 100%; height: auto; } It is difficult for some devices to determine to which "height" you refer...even though the standards say it's the height of the container... Some devices refer to the height of the <figure> or <div>, etc. some devices refer to the height of the screen or the "page". Width is much more reliable. The above css will expand the image to the full screen width and then the height will adjust to keep the aspect ratio. Sometimes this causes the image height to grow larger than the screen so I also add the following as a catch-all: img {max-width:100%; max-height:100%} Cheers, Last edited by Turtle91; 10-15-2018 at 06:57 PM. |
10-15-2018, 07:36 PM | #3 |
Junior Member
Posts: 4
Karma: 10
Join Date: Jun 2011
Device: kindle
|
Thanks, I'll give that a try.
|
10-15-2018, 07:39 PM | #4 |
Grand Sorcerer
Posts: 6,496
Karma: 84420419
Join Date: Nov 2011
Location: Tampa Bay, Florida
Device: Kindles
|
I recommend using the SVG wrapper approach.
Setting either height or width to 100% and allowing the other dimension to be automatic will result in image distortion depending on the image and screen dimensions. The max-width and max-height properties are ignored by Kindle devices. |
|
Similar Threads | ||||
Thread | Thread Starter | Forum | Replies | Last Post |
Feature Request / Bug: Insert Full Page Image | rashkae | Editor | 2 | 02-27-2017 01:13 PM |
How to be sure a full page image+ caption is not split between 2 pages? | silviolorusso | ePub | 9 | 07-12-2013 08:24 PM |
Image handling - XGA 1024*768, full page etc | trevorburdon | Workshop | 15 | 03-07-2013 06:07 PM |
Full page image best practices & TOC | illustrata | Sigil | 2 | 04-26-2011 01:50 PM |
Full page Image | Nakaleen | ePub | 1 | 01-20-2011 01:44 PM |