I am using images with 1400 px width in the EPUB. While reviewing the file in iPAD with iOS 8.4 and iBooks 4.3, I have noticed that the images are automatically shrinked to its screensize with space above and below the images. But this is not the case in iBooks 3.2 App.
If anyone encountered similar issue and solution to this would be appreciated.
Thanks, Senthil Kumar R
First, I don't know what your problem is. Is the problem that the images are shrunk or that there is space above or below the images?
The current trend is for ebook publishers to allow high resolution images and then to shrink them automatically or according to the percentages you specify.
I am working on a similar problem (and documented some of my helpful resources here: Interior Image requirements for non-Kindle distributors & devices with retina displays? ). I haven't tested yet on the ibooks platforms, but I can speak about the kind of solution you are seeking. My guess is that the solution you want is similar to what I am doing.
First, you need to use css media queries. Second, you need to specify the width of the div containing the image. Here's an example to get you started. For HTML code:
<div class=image-replace-title>
<img/>
</div>
Here would be the CSS code I am using.
@media only screen
and (min-device-width: 320px)
and (max-device-width: 767px)
{
div.image-replace-title {
width: 94%;
margin-left: auto;
margin-right: auto;
}
div.image-replace-title img {
width: 100%;
display: inline;}
}
@media only screen
and (min-device-width: 768px)
and (orientation: portrait)
{
div.image-replace-title {
width: 80%;
max-width: 684px;
margin-left: auto;
margin-right: auto;
}
div.image-replace-title img {
width: 100%;
display: inline;
}
}
For the record, the first media query is for iphones, the second one is for ipads 1-4. I think I added one more media query for dimensions over 1200 pixels.
