Html CSS3多列将图像分成几个部分

我正在iOS平台上实现一个epub阅读器。我使用CSS多列布局对HTML文件进行分页。它在纯文本HTML文件上运行良好，但在加载图像时，图像将被分成多个页面

以下是我的多列风格：

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

我已尝试实现以下样式：

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

---

但它不起作用。如何避免图像分离？

如果图像高于480px，它会将图像分割到下一列，列的高度必须大于图像的高度

才能动态执行此操作，即当您阅读epub时不知道其内容，将每个图像包装在一个div中，然后附加“内部分页符：避免”该div的属性有效。在Android3.1的WebView中将该属性严格附加到图像上，由于某种原因，对我来说不起作用，这是我的解决办法

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

示例（不带jQuery）：

var images=document.getElementsByTagName（'img'）；
var imgLength=images.length；
对于（变量i=0；i

更新到一篇旧文章，但希望这能帮助那些仍然有类似问题的人。

你能添加一个演示示例吗？你的照片有多大？

   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';
   }