-
Notifications
You must be signed in to change notification settings - Fork 102
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Large images are clipped when rendered in two-column mode #138
Comments
Thanks @john-nowak, it looks like the "image resize trick" works in some cases, but not all. JS code culprit: 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: |
Duplicate: #153 |
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 appropriatewidth
in terms of pixels withheight: auto;
would work, but it's not the most elegant solution.The text was updated successfully, but these errors were encountered: