Html flexbox内图像最大高度100%

在flex容器中设置图像的最大高度和最大宽度时，我遇到了一个小问题

以下是flex容器的css

.galleria-images{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items:center;
  flex : 1; /* It's also a flex item hence take default height available in viewport */
}

现在，我的应用程序将有一个子映像到flex容器，该容器位于两个轴的中心。但它不应超过父容器（柔性容器）的高度或宽度。我也不希望图像缩小或增大以保持纵横比。因此我写了以下css

img{
    flex:0 0 auto;
    vertical-align: bottom;
    max-width: 100%;
    max-height: 100%;
}

但这对我来说是可行的。尽管flex容器具有灵活的高度，但其内部的图像仍会溢出

当视口方向发生更改时，此操作有效。如下图所示

还有什么可以做的吗？

.galleria{
位置：绝对位置；
排名：0；
底部：0；
左：80px；
右：80px；
背景色：rgba（1001001000.5）；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
}
.galleria，galleria images{
显示器：flex；
弯曲方向：行；
证明内容：中心；
对齐项目：居中；
弹性：1；
背景色：rgba（2002002000.7）；
}
.galleria.galleria img{
flex:0自动；
垂直对齐：底部对齐；
最大宽度：100%；
最大高度：100%；
}
.凯丹，凯丹拇指{
flex:050px；
背景色：rgba（2002002000.3）；
}

---

图像元素忽略其直接父元素，因为它具有静态位置。尝试使父元素相对定位，并使图像绝对定位：

.galleria-images {
    position: relative;
}

.galleria-images img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

---

更新的fiddle:

您可以尝试使用，并确保查看浏览器支持

objectfit

CSS属性指定如何将替换元素的内容安装到由其使用的高度和宽度建立的框中

并尝试根据需要调整

调整内容
值



.galleria{
位置：绝对位置；
排名：0；
底部：0；
左：80px；
右：80px；
背景色：rgba（1001001000.5）；
溢出：隐藏；
显示器：flex；
弯曲方向：立柱；
}
.galleria，galleria images{
显示器：flex；
弯曲方向：行；
/*证明内容：中心*/
对齐项目：居中；
弹性：1；
背景色：rgba（2002002000.7）；
溢出：自动；
}
.galleria.galleria img{
弹性：0.100%；
垂直对齐：底部对齐；
最大宽度：100%；
最大高度：100%；
对象匹配：包含；
}
.凯丹，凯丹拇指{
flex:050px；
背景色：rgba（2002002000.3）；
文本对齐：居中；
}

缩略图

.galleria .galleria-images img {
  ...
  max-width: 100%;
  max-height: 100%;
  object-fit: contain; /*or "cover" depends on what you need*/
}