Skip to content
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.

Sign up for GitHub

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

Jump to bottom

Cover image on Chrome is not correctly sized #342

Open
kimtuck opened this issue Nov 11, 2016 · 3 comments
Open

Cover image on Chrome is not correctly sized #342

kimtuck opened this issue Nov 11, 2016 · 3 comments
Labels
browser:Chrome difficulty:Dev func:Image func:Layout priority:High type:Bug

Comments

@kimtuck
Copy link

kimtuck commented Nov 11, 2016

When viewing a book that has a cover image, on firefox the image occupies exactly the height of the viewport (height 100% of viewport). On chrome, the same book's cover has a width of 100%; so the image occupies several pages.
@danielweck
Copy link
Member

related / duplicate?
#138

#267

@kimtuck kimtuck mentioned this issue Nov 22, 2016
Open
@JayPanoz JayPanoz mentioned this issue Aug 16, 2017
Closed
@danielweck danielweck mentioned this issue Mar 6, 2019
Closed
@ronghester
Copy link

ronghester commented Mar 6, 2019 •
edited
Loading

with reference to this thread. readium/readium-css#55 (comment)

Readium-shared-js is processing below html from start.html differently causing the cover image to stretch.
HTML in start.html where cover image does not stretch.

<body style="margin:0.00em; text-align:center;">
   <p class="cover" style="text-align:center;"><img style="height: 100%;" src="9780857633446_cover_epub.jpg" alt=""/></p>
 </body>

Cover image is stretch in this book

<body style="margin-top:0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px;  text-align: center; background-color: #ffffff;">
 <div><img src="docimages/cover_ader.jpg" alt="cover" style="height: 100%" /></div>
</body>

As mentioned in the linked thread the readium-shared-js image processing code is not changed in years but we were using a very old readium (probably 3+ year old) where both these htmls were rendering the cover image perfectly without any stretching.

Is there a way or configuration which can fix this issue for us somehow. We are testing on android small devices and this issue is very evident on handsets as well as on Tabs.

@ronghester
Copy link

The image stretching issue also exist in current version of android readiumSDK launcher. After further investigation into the readium-shared-js code, found that the image resizing is not taking effect on mobile devices, since the height was used in %

readium-shared-js/js/views/reflowable_view.js

Lines 988 to 1018 in 7f245be

//we need this styles for css columnizer not to chop big images
function resizeImages() {
if(!_$epubHtml) {
return;
}
var $elem;
var height;
var width;
$('img, svg', _$epubHtml).each(function(){
$elem = $(this);
// if we set max-width/max-height to 100% columnizing engine chops images embedded in the text
// (but not if we set it to 99-98%) go figure.
// TODO: CSS min-w/h is content-box, not border-box (does not take into account padding + border)? => images may still overrun?
$elem.css('max-width', '98%');
$elem.css('max-height', '98%');
if(!$elem.css('height')) {
$elem.css('height', 'auto');
}
if(!$elem.css('width')) {
$elem.css('width', 'auto');
}
});
}

In the above code, if the % for height is replaced by vh then the images get resized perfectly on mobile device.

Current code
$elem.css('max-height', '98%');
Replaced With
$elem.css('max-height', '98vh');

This trick will resolve the issues of image resizing/stretching on android device. However this trick may not work in chrome as chrome has issues with 'vh' so its a mobile device specific solution.

Thought it would be useful for someone facing similar problem.

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser:Chrome difficulty:Dev func:Image func:Layout priority:High type:Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@danielweck @ronghester @rkwright @kimtuck