Dislaying images fullscreen on Kindle 3 is quite a hustle since Kindle leaves a lot of space around the image and no one knows the exact size of that space for sure. I have been working on it quite some time and did a lot of experimentation.
What I deduced from my experiments, calculating right image size is very complex issue and depends on the dimensions of all embedded images. Probably I am wrong but I felt like it.
800x580 is seems like the best dimension for viewable screen but for zoomed image it is not, since it leaves spaces around zoomed image. I did'nt try below 580 because I use image zoom alot.
As you can guess from the title,
entire viewable screen and
entire screen are not the same. Viewable screen = entire screen - margins and Kindle leaves very large margins around the book. You need to know there is no way you can get full screen display for mobi files. There will be spaces around the reading area, no matter what.
But for larger image view, you can zoom on the image (press up or down arrow) , then image will cover the entire screen.
Testing Process
First I created images with with different dimension starting with 800x580 to 800x590 px dimensions then added them to a html as shown below.
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Kindle 3 Dimension Test</title>
<link href="style.css" rel="stylesheet" type="text/css"/>
<meta content="http://www.w3.org/1999/xhtml; charset=utf-8" http-equiv="Content-Type"/></head>
<body>
<p><img alt="image3" src="580.jpg"/></p>
<p><img alt="image3" src="581.jpg"/></p>
<p><img alt="image3" src="582.jpg"/></p>
<p><img alt="image3" src="583.jpg"/></p>
<p><img alt="image3" src="584.jpg"/></p>
<p><img alt="image3" src="585.jpg"/></p>
<p><img alt="image3" src="586.jpg"/></p>
<p><img alt="image3" src="587.jpg"/></p>
<p><img alt="image3" src="588.jpg"/></p>
<p><img alt="image3" src="589.jpg"/></p>
<p><img alt="image3" src="590.jpg"/></p>
</body>
</html>
Here is the css I used
Code:
@namespace h "http://www.w3.org/1999/xhtml";
h|body, h|p, h|div, h|img {
margin: 0;
padding: 0
}
h|p {
text-align: center
}
h|img {
width: auto;
height: auto;
max-height: 100%;
max-width: 100%
}
I used calibre to convert it to mobi. I also debugged the mobi to study the conversion.
Contrary to my expectation viewable screen has also 800x600px dimension.
You can download Kindle 3 Dimension Test.mobi and debug files from the attachment section.
If you can post similar experimental mobi files, or participate in the poll, we may find best image dimension.