Css 如何在不破坏纵横比的情况下在div中均匀排列图像

当我展示我失败的尝试时，我想我最好解释一下自己：

尝试1<代码>页边距自动调整

div{
高度：50px；
宽度：500px；
边框：1px纯黑；
}
div>img{
身高：100%；
显示：块；
保证金：0自动；
}

---

您对flexbox方法几乎很在行。不要使元素增长，因此不要将flex设置为auto，这将设置

flex-grow:1

div{
高度：50px；
宽度：500px；
边框：1px纯黑；
显示器：flex；
证明内容：周围的空间；
}
div>img{
身高：100%；
/*或边距：自动而不是对齐内容：周围的空间*/
}

只需使用flex，但不要在imgs上使用flex:auto，它工作正常

div {
    height: 50px;
    width: 500px;
    border: 1px solid black;
    display: flex;
}

div > img {
    height: 100%;
    display: block;
    margin: 0 auto;
}