Kindle images not fitting

simon5586 · 11-20-2016, 11:38 AM

Hi, I'm sure you've had this question a million times, but could anyone help me to get the images in an epub to fit full page?

I've tried lots of different things like using width: 100% and max-width: 100%, but the images still have a large white margin around them when I convert the epub in Kindle Previewer.

Here is the code I am using:

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
td, th {
border-style:solid;
border-width:1px;
}
table {
border-collapse:collapse;
}
body {
-epub-hyphens:auto;
-webkit-hyphens:auto;
}
@page {
margin: 0px 0px 0px 0px;
}
img._idGenPageitem-1 {
margin: 0px 0px 0px 0px;
}
div._idGenPageitem-2 {
text-align: center;
max-width: 100px;
margin: 0px 0px 0px 0px;
}

Attachment 153119

Thanks
Simon

jhowell · 11-20-2016, 05:37 PM

It is difficult to help without more information. Your attachment is missing.

How is your image coded in the HTML file? Which version of the Kindle Previewer are you using? Are you trying to make the image stretch to fit the screen or do you want to preserve the aspect ratio?

Attaching a small non-copyrighted sample file along with a screen shot of how it looks on your system and a short description of what you want to change about it would help others to help you.

simon5586 · 11-21-2016, 02:57 PM

Hi Jhowell, thank you for your reply and sorry I'm new to this.

Yes I wanted the images to fit the screen with no margins, the images shouldn't stretch as the aspect ration is correct for kindle fire (1200x1920px), but for some reason something is causing it not to fit.

Here is the html:

<?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>Nutti-The-Squirrel-Who-Couldn't-Eat-Nuts</title>
<link href="../Styles/idGeneratedStyles.css" rel="stylesheet" type="text/css" />
</head>

<body id="Nutti-The-Squirrel-Who-Couldn-t-Eat-Nuts">
<div class="_idGenPageitem-2"></div>

<div class="_idGenPageitem-2"><img alt="2.jpg" class="_idGenPageitem-1" height="1920px" src="../Images/2_opt.jpeg" width="1200px" /></div>
</body>
</html>

And here is the css:

body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote {
margin:0;
padding:0;
border-width:0;
}
td, th {
border-style:solid;
border-width:1px;
}
table {
border-collapse:collapse;
}
body {
-epub-hyphens:auto;
-webkit-hyphens:auto;
}
@page {
margin: 0px 0px 0px 0px;
}
img._idGenPageitem-1 {
margin: 0px 0px 0px 0px;
}
div._idGenPageitem-2 {text-align: center; width: 100%; height: auto; margin: 0px 0px 0px 0px;}

https://www.dropbox.com/s/jh8qa0af08...pture.JPG?dl=0

jhowell · 11-21-2016, 03:29 PM

Your image looks normal to me. For reflowable books the Kindle app reserves screen space for the title on top, status info on the bottom, and margins on the sides. The usable space to display your book content is reduced by that amount. As far as I know only fixed-layout books are able to display images full-screen.

It looks like your content would be well suited to fixed-layout Children's book formatting. See chapter 10 of the Amazon Kindle Publishing Guidelines for more information.

(PS: You may want to ask to have this thread moved to the Kindle formats forum since the issue has more to do with Kindle than EPUB.)

Notjohn · 11-22-2016, 06:34 AM

On a tablet, the reader can zoom any image. That's one reason I prefer my Fire to my Paperwhite. (I read a lot of military history, and the maps are important.) Otherwise the image will fill the space normally occupied by the text, with due allowance to its height/width. The cover is the only exception, and AFAIK what you want can't be done, at least not for Kindle devices.

If you go to fixed format, your book won't be available for the e-ink Kindles.

JSWolf · 11-22-2016, 06:44 AM

Quote:

Originally Posted by Notjohn

On a tablet, the reader can zoom any image. That's one reason I prefer my Fire to my Paperwhite. (I read a lot of military history, and the maps are important.) Otherwise the image will fill the space normally occupied by the text, with due allowance to its height/width. The cover is the only exception, and AFAIK what you want can't be done, at least not for Kindle devices.

It is not a given that on a tablet you can zoom any image. It depends on the app(s) being used. You can use app(s) that do not allow any zooming of images on a tablet.

simon5586 · 11-22-2016, 07:10 PM

Great, thank you for your help. The reflowable format will be the problem then!

Simon

11-20-2016, 11:38 AM	#1
simon5586 Junior Member Posts: 5 Karma: 10 Join Date: Dec 2013 Device: Kindle Fire	Kindle images not fitting Hi, I'm sure you've had this question a million times, but could anyone help me to get the images in an epub to fit full page? I've tried lots of different things like using width: 100% and max-width: 100%, but the images still have a large white margin around them when I convert the epub in Kindle Previewer. Here is the code I am using: body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote { margin:0; padding:0; border-width:0; } td, th { border-style:solid; border-width:1px; } table { border-collapse:collapse; } body { -epub-hyphens:auto; -webkit-hyphens:auto; } @page { margin: 0px 0px 0px 0px; } img._idGenPageitem-1 { margin: 0px 0px 0px 0px; } div._idGenPageitem-2 { text-align: center; max-width: 100px; margin: 0px 0px 0px 0px; } Attachment 153119 Thanks Simon

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Accessories AC/DC charging adapter fitting the PE	sneakyspider	enTourage eDGe	2	12-31-2015 12:20 PM
Fitting images to Kindle screen size	John123	Workshop	1	11-18-2013 03:40 PM
Kobo page fitting	Rugalb	Kobo Reader	17	09-19-2013 09:14 PM
Free (nook/Kindle/DRM-free@XtianBk/Kobo) The Fitting Room [Christian Spiritual Guide]	ATDrake	Deals and Resources (No Self-Promotion or Affiliate Links)	1	04-16-2012 07:56 PM
PRS-350 Fitting replacement stylus for the 350	adbosch	Sony Reader	4	06-02-2011 05:40 PM

11-20-2016, 05:37 PM	#2
jhowell Grand Sorcerer Posts: 7,072 Karma: 91577715 Join Date: Nov 2011 Location: Charlottesville, VA Device: Kindles	It is difficult to help without more information. Your attachment is missing. How is your image coded in the HTML file? Which version of the Kindle Previewer are you using? Are you trying to make the image stretch to fit the screen or do you want to preserve the aspect ratio? Attaching a small non-copyrighted sample file along with a screen shot of how it looks on your system and a short description of what you want to change about it would help others to help you.

11-21-2016, 02:57 PM	#3
simon5586 Junior Member Posts: 5 Karma: 10 Join Date: Dec 2013 Device: Kindle Fire	Hi Jhowell, thank you for your reply and sorry I'm new to this. Yes I wanted the images to fit the screen with no margins, the images shouldn't stretch as the aspect ration is correct for kindle fire (1200x1920px), but for some reason something is causing it not to fit. Here is the html: <?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>Nutti-The-Squirrel-Who-Couldn't-Eat-Nuts</title> <link href="../Styles/idGeneratedStyles.css" rel="stylesheet" type="text/css" /> </head> <body id="Nutti-The-Squirrel-Who-Couldn-t-Eat-Nuts"> <div class="_idGenPageitem-2"></div> <div class="_idGenPageitem-2"><img alt="2.jpg" class="_idGenPageitem-1" height="1920px" src="../Images/2_opt.jpeg" width="1200px" /></div> </body> </html> And here is the css: body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, pre, code, blockquote { margin:0; padding:0; border-width:0; } td, th { border-style:solid; border-width:1px; } table { border-collapse:collapse; } body { -epub-hyphens:auto; -webkit-hyphens:auto; } @page { margin: 0px 0px 0px 0px; } img._idGenPageitem-1 { margin: 0px 0px 0px 0px; } div._idGenPageitem-2 {text-align: center; width: 100%; height: auto; margin: 0px 0px 0px 0px;} https://www.dropbox.com/s/jh8qa0af08...pture.JPG?dl=0

11-21-2016, 03:29 PM	#4
jhowell Grand Sorcerer Posts: 7,072 Karma: 91577715 Join Date: Nov 2011 Location: Charlottesville, VA Device: Kindles	Your image looks normal to me. For reflowable books the Kindle app reserves screen space for the title on top, status info on the bottom, and margins on the sides. The usable space to display your book content is reduced by that amount. As far as I know only fixed-layout books are able to display images full-screen. It looks like your content would be well suited to fixed-layout Children's book formatting. See chapter 10 of the Amazon Kindle Publishing Guidelines for more information. (PS: You may want to ask to have this thread moved to the Kindle formats forum since the issue has more to do with Kindle than EPUB.)

11-22-2016, 06:34 AM	#5
Notjohn mostly an observer Posts: 1,519 Karma: 987654 Join Date: Dec 2012 Device: Kindle	On a tablet, the reader can zoom any image. That's one reason I prefer my Fire to my Paperwhite. (I read a lot of military history, and the maps are important.) Otherwise the image will fill the space normally occupied by the text, with due allowance to its height/width. The cover is the only exception, and AFAIK what you want can't be done, at least not for Kindle devices. If you go to fixed format, your book won't be available for the e-ink Kindles.

11-22-2016, 07:10 PM	#7
simon5586 Junior Member Posts: 5 Karma: 10 Join Date: Dec 2013 Device: Kindle Fire	Great, thank you for your help. The reflowable format will be the problem then! Simon