Open nunomira opened 7 years ago
Yea this looks like the ratio of the height for the container isn't being correctly calculated
The side paddings seem to be included in the width when calculating the width/height -ratio when the image is taller than the available browser height and causes the ratio to be a bit off when calculating the maximum width by the maxHeight.
A quickfix could be to add var imgRatio = height / width;
to the beginning of the _resize -method and replacing the content of if (height > maxHeight)
clause with width = (maxHeight / imgRatio) + widthBorderAndPadding;
https://jsfiddle.net/tcwkgxh0/4/
In this example, if you click the first image, it works as expected. If you go to the second image which is a a vertical one (portrait), it should be taller, as there is some blank space left between the footer and the image itself. I believe this comes from the max-width (incorrect?) value that is being applied to .modal-dialog. .ekko-lightbox-container gets the correct height, but the image doesn't.
https://jsfiddle.net/tcwkgxh0/5/
In this example I have removed some space with css , to get bigger images. The problem still occurs, but I've also noticed some strange things: If you open an image, the footer is not right at the bottom, therefore the image is even smaller. But if you navigate to the previous or next image, this will be ok, and then if you go back to the initial one, the footer is placed correctly as well.