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 12-19-2012, 01:28 PM   #1
Mat Ward
Junior Member
Mat Ward began at the beginning.
 
Posts: 2
Karma: 10
Join Date: Dec 2012
Device: Aldiko app for aAdroid
Images fit page as mobi, but not ePub

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.
Attached Files
File Type: epub EPUBRealTalk.epub (965.3 KB, 26 views)
Mat Ward is offline   Reply With Quote
Old 12-19-2012, 06:44 PM   #2
mzmm
Groupie
mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.mzmm has not lost his or her sense of wonder.
 
mzmm's Avatar
 
Posts: 161
Karma: 86115
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
mzmm is offline   Reply With Quote
 
Enthusiast
Old 12-19-2012, 11:48 PM   #3
Mat Ward
Junior Member
Mat Ward began at the beginning.
 
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>
Mat Ward is offline   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
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


All times are GMT -4. The time now is 05:26 AM.


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