View Full Version : My cover image keep shrinking when opened on ibooks

05-02-2013, 07:37 AM
For some reason, when I open up my epub in iBooks, the cover image inside the book shows up 75% smaller. I don't think I changed much between when it was working fine and when it wasn't. I installed a new font, and reordered some things, that's about it. Here is what it looks like:

[Image deleted - MODERATOR]

it's dimensions are 738 by 983

Here is my manifest if that is any help:

<item id="toc" href="toc.ncx" media-type="application/x-dtbncx+xml"></item>
<!-- css -->
<item id="covercss" href="css/cover.css" media-type="text/css"></item>
<item id="copyright" href="css/f_copyright.css" media-type="text/css"></item>
<item id="css1" href="css/page1.css" media-type="text/css"></item>
<item id="css2" href="css/page2.css" media-type="text/css"></item>
<item id="css3" href="css/page3.css" media-type="text/css"></item>
<item id="cssstyles" href="css/styles.css" media-type="text/css"></item>

<!-- font -->
<item id="cambo" href="fonts/Cambo-Regular.otf" media-type="font/opentype"></item>

<!-- xhtml -->
<item id="item1" media-type="application/xhtml+xml" href="cover.xhtml"></item>
<item id="item2" media-type="application/xhtml+xml" href="f_copyright.xhtml"></item>
<item id="item3" media-type="application/xhtml+xml" href="page1.xhtml"></item>
<item id="item4" media-type="application/xhtml+xml" href="page2.xhtml"></item>
<item id="item5" media-type="application/xhtml+xml" href="page3.xhtml"></item>

<!-- images -->
<item id="cover" href="images/cover.jpg" media-type="image/jpeg"></item>
<item id="page1" href="images/page1.jpg" media-type="image/jpeg"></item>
<item id="page2" href="images/page2.jpg" media-type="image/jpeg"></item>
<item id="page3" href="images/page3.jpg" media-type="image/jpeg"></item>


05-02-2013, 07:27 PM
open you image in an image editor and make the dimension 600x800px

in the cover.xhtml file

change the code to match this:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<html xmlns="">
<body id="toc_marker-1" style="margin-top:0px; margin-left:0px; margin-right:0px; margin-bottom:0px; text-align:center;" >
<div><img src="image/Cover.jpeg" alt="Cover.jpg" height="100%" />

05-03-2013, 07:01 AM
I followed your instructions, and I still have the same problem. tiny cover.

05-03-2013, 08:31 AM
Considering the image you posted, we're talking about a fixed-layout ePUB here. In this case, you need to specify the viewport dimensions in the head of the XHTML file, as follows:

<meta name="viewport" content="width=738, height=983"></meta>

Don't specify the image size on the <img> tag itself, do it in the CSS. You also need to specify page dimensions in the CSS:

body {
width: 783px;
height: 983px;

img {
position: absolute;
height: 983px;

05-03-2013, 11:53 AM
Still not working. This is crazy!

05-03-2013, 01:40 PM
NVM!! I fixed it. I had installed a new font, went I went back to the old one everything worked. No clue why.