Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 10-15-2018, 06:41 PM   #1
psychovertical
Junior Member
psychovertical began at the beginning.
 
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>
The height of figure is 100% and the portrait class is (CSS taken from Blitz framework) :

Code:
img.portrait {
  width: auto;
  height: 100%;
}
Now this works great in epub, and when converted by Kindle preview it also works, but not every time, with maybe 1 out of 10 images being smaller, sometimes 90% of the height, others only 30%. The strange thing is, if I past the same chunk of code five times (same code and image), some will be full page while one won't be. I've been fighting this for a week now, and could just publish as is, but it seems like I'm just missing something small that will allow all images to be full screen.

Can anyone help?

Thanks

Andy
psychovertical is offline   Reply With Quote
Old 10-15-2018, 07:54 PM   #2
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 1,680
Karma: 11766398
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 6/5/iPad 1,2 & Air/Surface Pro/Kindle PW
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 07:57 PM.
Turtle91 is online now   Reply With Quote
Old 10-15-2018, 08:36 PM   #3
psychovertical
Junior Member
psychovertical began at the beginning.
 
Posts: 4
Karma: 10
Join Date: Jun 2011
Device: kindle
Thanks, I'll give that a try.
psychovertical is offline   Reply With Quote
Old 10-15-2018, 08:39 PM   #4
jhowell
Wizard
jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.jhowell ought to be getting tired of karma fortunes by now.
 
jhowell's Avatar
 
Posts: 2,405
Karma: 24675885
Join Date: Nov 2011
Location: Florida
Device: Oasis 2, Fire, iPad Air 2, Nexus 7
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.
jhowell is online now   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Feature Request / Bug: Insert Full Page Image rashkae Editor 2 02-27-2017 02:13 PM
How to be sure a full page image+ caption is not split between 2 pages? silviolorusso ePub 9 07-12-2013 09:24 PM
Image handling - XGA 1024*768, full page etc trevorburdon Workshop 15 03-07-2013 07:07 PM
Full page image best practices & TOC illustrata Sigil 2 04-26-2011 02:50 PM
Full page Image Nakaleen ePub 1 01-20-2011 02:44 PM


All times are GMT -4. The time now is 06:41 PM.


MobileRead.com is a privately owned, operated and funded community.