Images split

[vichenze]

Using auto layout with 2 columns, I have images split on each column, like this :

I've tried to edit the epub document and add CSS rules to the image (for example max-height: 100%), but that's not enough and the image is still split.
Is there a way to prevent such a behavior ?

Thanks !

[matwood]

We (as in BiblioLabs) have not found a way to fix the split image behavior across all browsers, all EPUBs, and all browser window sizes. I would be curious to hear about anyone who has looked into this recently and may have some ideas.

[johanpoirier]

You could try max-height: 100vh instead of 100%

[da70]

We had split cover images, and a fix that worked for us on readium-js-viewer version [0375c9a|https://github.com/readium/readium-js-viewer/commit/0375c9ad36ebc07b6ea074e78fbbe4bbf714b803] is to set 'position' : 'absolute' on the <svg> element. We do this when ReadiumSDK.Events.CONTENT_DOCUMENT_LOADED is triggered.
However, we recently loaded some new books from a new vendor and this fix is no longer working.

I asked our designer why and how this works and she is not exactly sure, it was something she intuited and she hasn't had time to dig into the Readium code to figure out the mechanics.

[vichenze]

@johanpoirier Thanks ! The max-heigth: 100vh trick works great with an image on top of a page.
However, it does not solve the problem if there is a paragraph before the image.

[danielweck]

Related: #138

[danielweck]

Related: #88

[danielweck]

Related: #144

[danielweck]

Related: #64

[vichenze]

By the way, if max-height:100vh does not work in every situation, max-height: 95vh seems to work everytime (on image at least)

[danielweck]

In the CSS box model, the margin, border, and padding values must be taken into consideration when working with the image dimensions (or any other element, for that matter), depending on the value of the box-sizing property (see border-box). So you could indeed end-up with a max-height constraint that not only does not work when there are other visible elements before or after the image (because the vh unit is relative to the viewport, and the iframe height may accommodate other visual elements), but also because of potential box model inconsistencies.
That's why those "image fit" issues have not been resolved across the board yet. There are numerous edge-cases to cover.

[jccr]

Maybe using this multi column css directive on the image elements would work:
https://css-tricks.com/almanac/properties/b/break-inside/

[danielweck]

Thanks @jccr
Related:
readium/readium-sdk#229
#127 (comment)