Azw3 - Problems with images

[Spinaz]

Hi! I'm new to the forum and ebook publishing in general so I have a lot of doubts and I'm still trying to learn, sorry if this turns out to be a really simple thing...

I'm trying to create an ebook for multiple devices, so I have an epub3 to use on pc and ibook and an azw3 for the kindle.

The new problem at the moment is: I created the text in Indesign and placed the image at the center of the page.
However, when I create the epub3 and convert it to azw3, the image in the kindle is not centered and is cut at the right.
I don't have and epub3 compatible device to test the file on.
Here I have a photo on the kindle to show you the problem.
https://www.dropbox.com/s/6ec5uoz8iy...31918.jpg?dl=0

Here is the code taken from the epub3 created with indesign

textextextext </p>
			<div class="_idGenObjectLayout-1">
				<div id="_idContainer004">
					<center><img class="_idGenObjectAttribute-1" src="image/robinson1.jpg" alt=""/></center>
				</div>
			</div>
			<p class="Text">textextextext

And the relative CSS

#_idContainer004, #_idContainer005, #_idContainer006, #_idContainer007 {
	display:inline-block;
	height:720px;
	width:720px;
}
img._idGenObjectAttribute-1 {
	height:100%;
	min-width:100%;
	width:100%;
}
div._idGenObjectLayout-1 {
	text-align:center;
}

And this is the azw3 code ( I converted it from the epub3 with calibre )

textextext</p>
			<div class="_idgenobjectlayout">
				<div class="calibre8" id="_idContainer004">
					<center class="calibre9"><img alt="" class="_idgenobjectattribute" src="../images/00001.jpeg"/></center>
				</div>
			</div>
			<p class="text">textextext

and the relative CSS

.calibre8 {
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    border-top-width: 0;
    display: inline-block;
    height: 720px;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    width: 720px
    }

.calibre9 {
    display: block;
    text-align: center
    }

.calibre9 {
    display: block;
    text-align: center
    }

Also, is there a way to center the image vertically between the two paragraphs?

The epub need to be reflowable and not fixed.
I'm using calibre on windows 8.1 and I have a kindle paperwhite.
On on an Ipad with ibooks (epub3 ) the images are centered, both vertically and horizontally.

Sorry for the long post but I searched online for some guides and I can't understand where I'm making a mistake...
Thanks in advance! : )

[senhal]

The main problem is:

height:720px;width:720px;

This is imposing a picture size...

But, according to me, the full code used is a mess: div inside div, the tag <center>...

The simple way is to include the img inside a div.
For the img you have to specify a width or a height (in this particular case a width), without imposing a size (you can use a percentage).
The div will only center the picture (eventually adding some margins in order to separate the picture and the text).

<p>text</p>
<div class="picture"><img alt="" width="100%" src="../images/00001.jpeg"/></div>
<p>text</p>

In the css:
div.picture{text-indent:0;text-align: center;margin-top:.5em;margin-bottom:.5em}

[Spinaz]

Hi!
After a while I tried to modify the indesign file and re-exporting it into a epub3 file.
If someone does happen to have the same probem while working with indesign:
I tried to place the images with "jump object" and not "warp around object shape" like I did...

It seems to work now, but the images are stretched vertically. I'll work on this.

Originally Posted by senhal

The main problem is:

This is imposing a picture size...

But, according to me, the full code used is a mess: div inside div, the tag <center>...

The simple way is to include the img inside a div.
For the img you have to specify a width or a height (in this particular case a width), without imposing a size (you can use a percentage).
The div will only center the picture (eventually adding some margins in order to separate the picture and the text).

<p>text</p>
<div class="picture"><img alt="" width="100%" src="../images/00001.jpeg"/></div>
<p>text</p>

In the css:
div.picture{text-indent:0;text-align: center;margin-top:.5em;margin-bottom:.5em}

Thanks I'll try this!
The code is a mess indeed, but it's the default from indesign ( apart from the tag center which I tried to add with no result ) and I didn't touch it yet, apart from some trial and error tests.

[Phssthpok]

Originally Posted by Spinaz

It seems to work now, but the images are stretched vertically. I'll work on this.

Try styling them with "width: 100%; height: auto".