Html 在div内保持图像的纵横比

我正在尝试制作我自己的灯箱，但我无法克服的是，父对象与图像的匹配，保持其比例。lightbox的想法是，它应该正确显示任何图像（肖像、风景），所以这不是一个“错误的图像”的情况

案例：我的父div适合面向肖像的图片的原始宽度，同时保持90 VH的最大高度。这会导致图片的比例不一致

该项目：

守则：

#单板{
位置：固定；
宽度：100vw；
高度：100vh；
背景：#0000008e；
z指数：10000；
显示：无；
对齐项目：居中；
证明内容：中心；
&.贴面{
显示器：flex；
}
.贴面图像容器{
位置：相对位置；
最大高度：90vh；
最大宽度：90vw；
显示器：flex；
边框：10px实心番茄；
.贴面图像{
边框：10px纯白；
最大宽度：100%；
最大高度：100%；
//对象匹配：包含；
}
}
}

---

我提出了一种算法，可以计算图像容器的最佳宽度来显示保持其比例的图像。也许我会在不久的将来改进它

if（posineimage.naturalHeight>posineimagecontainer.offsetHeight）{
var height difference=单板图像.naturalHeight-单板图像容器.offsetHeight
var百分比=高度差/贴面图像。自然高度*100
var containerWidth=单板图像.naturalWidth-（单板图像.naturalWidth/100*百分比）
单板ImageContainer.style.width=集装箱宽度+‘px’；
}

我提出了一种算法，可以计算图像容器的最佳宽度来显示保持其比例的图像。也许我会在不久的将来改进它

if（posineimage.naturalHeight>posineimagecontainer.offsetHeight）{
var height difference=单板图像.naturalHeight-单板图像容器.offsetHeight
var百分比=高度差/贴面图像。自然高度*100
var containerWidth=单板图像.naturalWidth-（单板图像.naturalWidth/100*百分比）
单板ImageContainer.style.width=集装箱宽度+‘px’；
}

你能发布一些代码吗here@JonathanIrwin当然，刚刚编辑过。谢谢你能发一些代码吗here@JonathanIrwin当然，刚刚编辑过。谢谢