任务:我有一个带缩略图的照片库。点击缩略图应该显示并适合全屏幕中心的图像，而不会丢失纵横比，也不会隐藏浏览器窗口之外的图像的任何部分。这应该适用于任何图像纵横比（正方形，矩形x>y和x

我所拥有的:适用于尺寸x>y的水平图像。问题与正方形和垂直图像，一个滚动条出现，图像不适合全屏。有人能帮帮我吗，已经挣扎了两天了。

演示:

null

$(document).ready(function() {
  $('.photo-overlay').hide();
  $('.thumb').click(function(event) {
    event.preventDefault();
    var imageUrl = $(this).attr('href');
    $('.photo-overlay').show();
    $('.photo-content').css('background-image', 'url(' + imageUrl + ')');

  });
  $('.photo-overlay').click(function(event) {
    $('.photo-overlay').hide();
  });

});

.photo-wrapper {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: #111;
  z-index: 2211;
  display: flex;
  justify-content: center;
}

.photo-content{
  background-repeat: no-repeat;
  background-size: contain;
  position:absolute;
}

.imgBox {
  width: 20%;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="photo-wrapper" align="center">
    <div class="photo-content" align="center">
        <img src="" style="visibility: hidden; max-height:100%; max-width:100%" />
    </div>
</div>

<div class="imgBox">
    <a  class="thumb" href="https://cdn.pixabay.com/photo/2017/09/11/22/40/seamless-pattern-2740688_960_720.png">
        <img src="https://cdn.pixabay.com/photo/2017/09/11/22/40/seamless-pattern-2740688_960_720.png">
    </a>
</div>

null