CSS3 мультиколонка разбивает изображения на несколько частей

Question

Я внедряю epub reader на платформе iOS. Я разбил HTML-файлы на страницы, используя многостолбцовый макет CSS. Он отлично работает с чистыми текстовыми файлами HTML, но при загрузке изображений они будут разделены на несколько страниц.

Вот мой многоколонный стиль:

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

Я попытался реализовать следующий стиль:

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

Но это не работает. Как я могу избежать разделения изображений?

Answer 1

Чтобы сделать это динамически, то есть когда вы читаете epub, не зная его содержимого, оборачиваете каждое изображение в div и затем добавляете атрибут «page-break-inside: избежать» к этому div. Добавление этого атрибута строго к изображению в WebView для Android 3.1 по какой-то причине мне не помогло, это был мой обходной путь.

Пример (без 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';
   }

Обновите старый пост, но, надеюсь, это поможет тем, у кого все еще есть подобные проблемы.

Answer 2

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

Answer 3

Если изображения превышают 480px, это приведет к разбивке изображений до следующего столбца, высота столбца должна быть больше высоты изображений