Html 如何将任意纵横比的图像放入全屏弹出div？

任务：我有一个带有缩略图的照片库。单击缩略图应显示并适合图像全屏居中，而不会丢失纵横比，也不会将图像的任何部分隐藏在浏览器窗口之外。这应该适用于任何图像纵横比（方形、矩形x>y和xy）。方形和垂直图像存在问题，会出现滚动条，并且图像不适合全屏显示。有人能帮我吗，已经挣扎了第二天了

演示：

$（文档）.ready（函数（）{
$（'.photo overlay'）.hide（）；
$（'.thumb'）。单击（函数（事件）{
event.preventDefault（）；
var imageUrl=$（this.attr（'href'）；
$（'.photo overlay'）.show（）；
$（'.photo content'）.css（'background-image'，'url（'+imageUrl+'））；
});
$（'.photo overlay'）。单击（函数（事件）{
$（'.photo overlay'）.hide（）；
});
})；

.photo包装器{
位置：绝对位置；
身高：100%；
宽度：100%；
排名：0；
左：0；
背景色：#111；
z指数：2211；
显示器：flex；
证明内容：中心；
}
.照片内容{
背景重复：无重复；
背景尺寸：包含；
位置：绝对位置；
}
.imgBox{
宽度：20%；
保证金：0自动；
}

---

偶然发现了这把小提琴：

它给出了我想要的结果

.full-screen {
    position: fixed; 
    top: 0; 
    left: 0; 
    bottom: 0;
    right: 0;
    background: url(http://placehold.it/150x350) 50% 50% no-repeat;
    -webkit-background-size: contain;
    background-size: contain;
}

<div class="full-screen">
</div>

。全屏{
位置：固定；
排名：0；
左：0；
底部：0；
右：0；
背景：url(http://placehold.it/150x350)50%50%不重复；
-webkit背景大小：包含；
背景尺寸：包含；
}