Current lightbox implementation has some issues with aspect ratio and margins:
Current buggy behaviors
Modal imposes a 15px padding right to accommodate the scrollbar. Since this is a no-issue if you are going to force the size to never scroll, this is not required.
Aspect ratio (when limiting size vertically) is working from a wrong assumption: that aspect ratio of OUTER container should be consistent. This apparently works on larger sizes, but as modal gets smaller, its clear this is the wrong approach: the INNER aspect ratio should match, and it changes having fixed-sizes borders.
Above 575px the modal has no margins and can touch the borders of the screen, but below that value, a 10px margin is added by bootstrap.
Some missing features
Modal is not centered on the screen, for image showcase, this is preferable than the normal behavior.
There is no way to limit the modal to a maximum size. Which could be desirable on scenarios where you have retina-optimized images (2x) that have twice the size as the final desired screen display. (I reported this as issue #273 )
A brief example of the issues:
Notice the higher padding on the bottom and the extra margin on the right.
Proposed fixes
Modal overrides the 15px padding always to 0.
Aspect ratio is calculated for the inner space
Modal always has a 10px separation from the borders
Modal is centered in the window (taken from #268)
You can specify a max-width and / or max-height optionally
I have added further example to the index.html examples file.
Current lightbox implementation has some issues with aspect ratio and margins:
Current buggy behaviors
Some missing features
A brief example of the issues:![lightbox-current](https://user-images.githubusercontent.com/4309019/31556081-123d45c8-b009-11e7-84ba-927fb4a97a2d.jpg)
Notice the higher padding on the bottom and the extra margin on the right.
Proposed fixes
I have added further example to the index.html examples file.