Javascript 如何使用flexbox在modal中保持图像纵横比？

我有一个图像库在我的模式，这是使用flexbox风格。问题是，一些水平方向过大的图片会溢出，使flexbox拉伸，因此，即使flex权重在css中设置，旁边的项目也会被弄乱

<div class="slideshow-container">
    <div class="mySlides fade" style="display: block;">
         <div class="numbertext">1 / 16</div>
              <img src="./img/normal/image.jpg" class="galimg" style="height: 331px;">
         <div class="text">Image description</div>
    </div>
    ....
</div>

CSS:

---

我知道问题可能出在我的JS中的某个地方，因为我尝试记录宽度和高度，结果通常为0。html是通过JS动态生成的。我尝试添加一个onImgLoad函数，但没有得到任何结果

没有必要做js的事情。只要修复你的css。添加一些样式和HTML元素。以下是在许多网站中显示不同大小图像的最常见方式（请展开代码段以查看其行为）

#模态库{//这是库周围的div
弹性：6；
显示器：flex；
右边距：自动；
弯曲方向：立柱；
调整内容：灵活启动；
对齐项目：居中；
}
.slideshow容器{
显示器：flex；
位置：相对位置；
保证金：0；
}
迈斯利德斯先生{
显示：块
}
.幻灯片图像{
显示：内联块；
宽度：220px；
文本对齐：居中；
垂直对齐：顶部；
边缘底部：20px；
}
.img集装箱{
显示：块；
宽度：200px；
}
.img容器.img{
显示：表格单元格；
垂直对齐：中间对齐；
文本对齐：居中；
}
.img容器img{
最大高度：200px；
最大宽度：200px；
}

1/16
图像描述
1/16
图像描述
1/16
图像描述
1/16
图像描述
1/16
图像描述
1/16
图像描述

var maxHeight = $('#modal-gallery').height()-39; // need 39px for the gallery navigation. 
var maxWidth = $('#modal-gallery').width();
var ratio = maxHeight/maxWidth;
$('.galimg').each(function(i){  
    if ($(this).height()/$(this).width() > ratio){
        $(this).width(maxWidth);
    } else {
        $(this).height(maxHeight);
    }
});

#modal-gallery { // this is the div surrounding the gallery
    flex: 6;
    display: flex;
    margin-right: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

.slideshow-container {
    display: flex;
    position: relative;
    margin: 0;
}