The image file's height is over when the image is big size

[Haduki029]

The image file's height is over when the image is big size

[Haduki029]

Hi, @frederickfogerty
Thank you for fast responsive and your alternatively fix idea.
I will try it and let you know about result.

[Karynvo]

It worked on Chrome for me @frederickfogerty. Thanks! Depending on how you want it to behave on mobile though, when you click on the image, the image will go to full size. I just removed this from the CSS instead of adding display:block;

.lum-lightbox-inner img{max-width:none;max-height:none}

Not fully sure of the repercussions on other browsers, but it did the job for me

[frederickfogerty]

Hi @Haduki029 👋 thank you for the issue.

It's hard to understand this specific problem without a screenshot or a way to reproduce this issue. Do you think you could provide either of these? Thanks!

[Ronamo]

Hi @Haduki029 👋 thank you for the issue.

It's hard to understand this specific problem without a screenshot or a way to reproduce this issue. Do you think you could provide either of these? Thanks!

https://honeycomb.liftoff.shop/vertical-poster-print

Clicking on the product image on this page reproduces the issue.

This issue is present in the current (as of 13-8-21) versions of Chrome and Edge (appears to be Webkit/Blink related) under both Mac OS and Windows, but not present in Firefox or Safari under Mac OS.

[frederickfogerty]

Thanks for the repro, I can see the issue now.

The right solution here is probably to modernise the way the positioning happens in the Lightbox to use Flexbox. Unfortunately I don't think we will have time to prioritise this work internally for a while, but I will add this to the backlog to see what happens.

Alternatively, a quick fix for your situation would be to set display to block for .lum-lightbox-image-wrapper. As code that would look like this:

.lum-lightbox-image-wrapper {
  display: block !important; 
}

I am hesitant to blindly update this library with this change since a) it will probably break in IE, and b) I would need to do some other cross-browser testing.

Let me know how this goes for you. Also, if you would like to submit a PR reworking this positioning to use Flexbox, or updating this CSS and doing some testing in evergreen browsers, I would gladly accept it. Thanks!

[sherwinski]

Closing this as there appears to be an adequate answer provided.