View Full Version : 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>