bell notificationshomepageloginedit profileclubsdmBox

10.01% popularity   0 Reactions

I have Indesing book for printing.
I optimized all styles for epub conversion.
I exported my book to epub from Indesing.
I unzip my epub and work on it html code. Then I zip it again.
I need to convert .epub to .mobi, but only in .mobi version the images are distortionate. Why?

I tested from .epub to .azw, azw to mobi and .epup to mobi. In all cases, .epub looks good, but .azw and .mobi distort images. (I use Calibre to convertions)

In CSS styles I have:

.image {
height:25%;
width:25%;
}

My client need upload her .epub to her ebook distributor, she upload .epub, and distributor convert it to .mobi, and its the same problem with images. They say that I have to fixed the issue; but I dont know what it is.


Free books android app tbrJar TBR JAR Read Free books online gutenberg


Load Full (1)

Login to follow story

More posts by @Ravi

1 Comments

Sorted by latest first Latest Oldest Best

 

@Julie

10% popularity   0 Reactions

Here is the css I use for my kindle images:

div.image-container {
width: 95%;
margin-left: auto;
margin-right: auto;
}

div.image-container img {
width: 100%;
display: inline;
}

The goal I wanted here was to have an image cover 95% of the screen, with the image in the center. You could change the 95% to 25% if that is what you want. I do not think the height property has any function in your code.

The idea behind responsive web design (and responsive ebook design) is that the images will adapt to the different screen sizes. You can use css media queries to change the css for your images and div depending on screen size. (I describe it here: kdp.amazon.com/community/thread.jspa?messageID=1005910 )

Kindle definitely supports the css width property and min-width on KF8 devices and apps. But it does NOT support the max-width property. Hope this helps.


Free books android app tbrJar TBR JAR Read Free books online gutenberg


Load Full (0)

 

Back to top