Flexbox行中的图像保持纵横比

Question

是否可以根据高度在Flex容器中居中时的高度来保持图像的宽高比：

<div class="fillerRow" style="flex: 80%">
    <div class="fillerBox"></div>
    <img id="centerImg" src="./img/image.png"></img>
    <div class="fillerBox"></div>
</div>

.fillerRow {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex: 1;
}

.fillerBox {
    flex: 1;
}

#centerIImg {
    height: 100%;
    flex: auto;
    width: auto;
}

这里的想法是图像根据屏幕高度进行缩放，同时保持其纵横比。围绕图像的两个填充框div应该调整它们自己的宽度，同时尊重中心的图像。

这怎么可能？