CSS3 multi-column breaks images into several parts

Question

I'm implementing an epub reader in iOS platform. I have paginated the HTML files using a CSS multicolumn layout. It works fine on pure-text HTML files, but when loading images, the images will be separated into several pages.

Here is my multicolumn style:

body {
    -webkit-column-width:320px;
    -webkit-column-gap:22px;
    height:480px;
}

I have tried to implement the following style:

img{
    -webkit-column-break-inside: avoid;
}

But it's not working. How can I avoid images separated?

Answer 1

To do this dynamically, i.e. when you read an epub not knowing its content, wrapping each image in a div and then appending the "page-break-inside: avoid" attribute to that div works. Appending that attribute strictly to an image in android 3.1's WebView didn't work for me for some reason, this was my workaround.

Example (without jQuery) :

   var images = document.getElementsByTagName('img');
   var imgLength = images.length;
   for(var i = 0; i < imgLength; i++)
   {
       images[i].innerHTML = '<div>'+images[i]+'</div>';
       images[i].pageBreakInside = 'avoid';
   }

Update to an old post, but hopefully this will help those still having similar problems.

Answer 2

If the images are higher than 480px, it will break the images to the next column, the height of the column must be larger than the height of images

Answer 3

img
{
max-width: 320px;
max-height: 480px;
height: auto;
};