Large images are clipped when rendered in two-column mode

As seen in the screenshot below, large images are clipped when rendered in two-column mode:

The screenshot is from the Readium Chrome app, but I see the same thing when using readium-shared-js in my own application.

To fix this issue, images should be sized such that their max width is equal to the width of the containing column. Setting max-width is not sufficient in the presence of columns. Setting an appropriate width in terms of pixels with height: auto; would work, but it's not the most elegant solution.

[danielweck]

Thanks @john-nowak, it looks like the "image resize trick" works in some cases, but not all.

JS code culprit:
https://github.com/readium/readium-shared-js/blob/develop/js/views/reflowable_view.js#L746

Note that in this other issue #88 I commented about CSS box-sizing (to account for padding + border), and also a "proper" (complete) solution might be to wrap images inside additional div elements, to encompass all edge cases (DOM height/width attributes, vs. CSS properties, implicit/explicit aspect ratio, etc.).

PS:
width:pixels + height:auto might need to be inverted in the case of top-to-bottom vertical writing mode + right-to-left page progression direction (Japanese is supported by inverting CSS column axis).

[danielweck]

Related: #88 and #144

[Kathybluefire]

Here's another take on this error. This is a jpg image, not a tint background, and in reflowable layout it breaks across two pages.

Windows 8 Chrome Extension 2.16

[danielweck]

Duplicate: #153