Css 将图像居中放置在div+；调整大小并保持图像的比例

我试图在div中垂直居中一个图像，同时保持原始图像的比例，只允许它在div中

原始图像源将动态更改-理论上可以是任意大小：200x150、500x100、500x500等

到目前为止，我得到的是：

.outer{
位置：相对位置；
背景：灰色；
宽度：200px；
高度：150像素；
}
.内部{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：金；
溢出：隐藏；
宽度：200px；
高度：150像素；
}
.内部img{
宽度：自动；
最大宽度：100%；
最大高度：150像素；
高度：自动；
}

---

只需在图像中添加以下内容

 margin: 0 auto;
    display: block;

完整代码：

.outer{
位置：相对位置；
背景：灰色；
宽度：200px；
高度：150像素；
}
.内部{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
背景：金；
溢出：隐藏；
宽度：200px；
高度：150像素；
}
.内部img{
宽度：自动；
最大宽度：100%；
最大高度：150像素；
高度：自动；
保证金：0自动；
显示：块；
}