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

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