当图像大于屏幕分辨率时，弹出图像查看器不会调整图像大小

Question

我正在使用Bootstrap，我使用了这个Gallery Image模板。

网站演示效果很好，因为图像是水平的：

​

​

但是当我编辑代码并放置我的图片(这些是垂直的)时，我认为它试图水平填充它们，这样图像就不会100%可见。

​

我如何解决这个问题，下面是我认为的代码(我是新手，所以我不确定)：

<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

此demo中的图片大小是通过CSS规则完全指定的，因此您可以添加max-height规则来限制图片的最大高度。

您可以将.popup figure img的规则修改为以下规则集：

.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);
}