Images fit page as mobi, but not ePub

Mat Ward · 12-19-2012, 01:28 PM

Hi - I'm brand new to Sigil and epubs. I have built a validated epub with images on separate HTML pages. The images come out fine, displayed on their own pages and sized to fit the screen, when I convert it into a mobi with Calibre and read it on the Kindle android app. But when I read it as an epub on the Alkido and ePub Reader android apps the cover shows only the top quarter and the other images show only a third of the image. There seems to be no simple solution to this, judging by the forums already discussing such problems. I have tried img.image {"max-height: 100%"} to no avail. Other users seem to have just given up and accepted that images do not resize correctly in epub format. Is this correct? My epub file EPUBRealTalk.epub is attached. Thank you.

mzmm · 12-19-2012, 06:44 PM

there's an error in your css

img.image {
"max-height: 100%"
}

should be

img.image {
max-height: 100%;
}

the other things is that that style (max-height) would be applied that to an image with the class "image", rather than the divs you've made with the class "image".

i would scrap the max-height, and use something like this:

css:

.imgwrap { height: 95%; width: 100%; text-align: center; }
.img_fullheight { height: 100%; }

html:

<div class="imgwrap"><img class="img_fullheight" /></div>

the div will size to 95% of the viewing area, and then the image will size to 100% of the div.

it'd be good to look at some css tutorials if you're making more books. w3c schools is probably a good start: http://www.w3schools.com/css/

good luck

Mat Ward · 12-19-2012, 11:48 PM

Hi - thanks for your time and patience.

I put the CSS code you suggested

.imgwrap { height: 95%; width: 100%; text-align: center; }
.img_fullheight { height: 100%; }

at the bottom of the CSS - no problem with that. However, I hit problems when I entered the suggested code for the HTML.

<div class="imgwrap"><img class="img_fullheight" /></div>

Yep, I need to learn how to code through the w3c tutorials.

If you have the time, can you please suggest where I enter that HTML code below. If you can repaste with the code in the right place, that would be ideal:

<?xml version="1.0" encoding="utf-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>RealTalk</title>
<link href="../Styles/template.css" rel="stylesheet" type="text/css" />
<link href="../Misc/page-template.xpgt" rel="stylesheet" type="application/vnd.adobe-page-template+xml" />
</head>

<body>
<div class="image"><img alt="Big Luke.jpg" src="../Images/Big%20Luke_fmt.jpeg" /></div>

<div class="story"></div>
</body>
</html>

12-19-2012, 11:48 PM	#3
Mat Ward Junior Member Posts: 2 Karma: 10 Join Date: Dec 2012 Device: Aldiko app for aAdroid	Thanks - where do I put the HTML code? Hi - thanks for your time and patience. I put the CSS code you suggested .imgwrap { height: 95%; width: 100%; text-align: center; } .img_fullheight { height: 100%; } at the bottom of the CSS - no problem with that. However, I hit problems when I entered the suggested code for the HTML. <div class="imgwrap"><img class="img_fullheight" /></div> Yep, I need to learn how to code through the w3c tutorials. If you have the time, can you please suggest where I enter that HTML code below. If you can repaste with the code in the right place, that would be ideal: <?xml version="1.0" encoding="utf-8" standalone="no"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>RealTalk</title> <link href="../Styles/template.css" rel="stylesheet" type="text/css" /> <link href="../Misc/page-template.xpgt" rel="stylesheet" type="application/vnd.adobe-page-template+xml" /> </head> <body> <div class="image"><img alt="Big Luke.jpg" src="../Images/Big%20Luke_fmt.jpeg" /></div> <div class="story"></div> </body> </html>

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Epub Images will not fit on Nook screen	senordustball	Conversion	4	10-26-2012 09:41 AM
Problem with images from epub to mobi	taskforsome	Kindle Formats	9	03-01-2012 12:38 PM
epub to mobi h1 page breaks not starting on new page	wannabee	Conversion	4	08-02-2011 12:46 AM
help mobi to epub conversion: lost all images	Sylver	Calibre	10	01-13-2011 08:31 PM
How to center/fit page width SVG images with <OBJECT>	amoroso	ePub	0	07-31-2010 11:48 AM

12-19-2012, 06:44 PM	#2
mzmm Groupie Posts: 171 Karma: 86271 Join Date: Feb 2012 Device: iPad, Kindle Touch, Sony PRS-T1	there's an error in your css img.image { "max-height: 100%" } should be img.image { max-height: 100%; } the other things is that that style (max-height) would be applied that to an image with the class "image", rather than the divs you've made with the class "image". i would scrap the max-height, and use something like this: css: .imgwrap { height: 95%; width: 100%; text-align: center; } .img_fullheight { height: 100%; } html: <div class="imgwrap"><img class="img_fullheight" /></div> the div will size to 95% of the viewing area, and then the image will size to 100% of the div. it'd be good to look at some css tutorials if you're making more books. w3c schools is probably a good start: http://www.w3schools.com/css/ good luck

Advert