popup image viewer doesn't resize the image when it is bigger than the screen resolution

Question

I'm working with Bootstrap, i used this template of Gallery Image .

The website demo works great because the images are horizontal :

But when i edited the code and put my picture (which are verticals), i think it is trying to fill them horizontally so the image isn't visible at 100%.

How can i fix that, here is the code i think (I'm newbie so I'm not sure) :

<script>
                popup = {
                    init: function(){
                        $('figure').click(function(){
                            popup.open($(this));
                        });

                        $(document).on('click', '.popup img', function(){
                            return false;
                        }).on('click', '.popup', function(){
                            popup.close();
                        })
                    },
                    open: function($figure) {
                        $('.gallery').addClass('pop');
                        $popup = $('<div class="popup" />').appendTo($('body'));
                        $fig = $figure.clone().appendTo($('.popup'));
                        $bg = $('<div class="bg" />').appendTo($('.popup'));
                        $close = $('<div class="close"><svg><use xlink:href="#close"></use></svg></div>').appendTo($fig);
                        $shadow = $('<div class="shadow" />').appendTo($fig);
                        src = $('img', $fig).attr('src');
                        $shadow.css({backgroundImage: 'url(' + src + ')'});
                        $bg.css({backgroundImage: 'url(' + src + ')'});
                        setTimeout(function(){
                            $('.popup').addClass('pop');
                        }, 10);
                    },
                    close: function(){
                        $('.gallery, .popup').removeClass('pop');
                        setTimeout(function(){
                            $('.popup').remove()
                        }, 100);
                    }
                }

                popup.init()

            </script>

Answer 1

The size of image in this demo is fully specified via CSS rules, thus you can add a max-height rule to constraint the maximum height of image.

You can modify the rule of .popup figure img to following rule sets:

.popup figure img {
  position: relative;
  z-index: 2;
  border-radius: 15px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2), 0 6px 30px rgba(0, 0, 0, 0.4);
  max-height: calc(100vh - 50px);
}