html - 将不同尺寸的图像居中放置？

Question

我有多个包含不同图像的图像，我需要在概览网格中显示这些图像。这些图像确实具有完全不同的尺寸和比例，并且这些图像的包装始终具有相同的高度和宽度。

我想将图像始终放置在 wrapper 的中心，但这行不通。

我用它来做图片

.content_page .slide_content .product img {
    /* max-height: 100%; */
    height: auto;
    width: 100%;
    margin: auto;
    float: none;
    border: none;
}

还有那个 wrapper

.content_page .slide_content .product {
    width: 27%;
    float: none;
    display: inline-block;
    margin: 30px 3%;
    position: relative;
    height: 400px;
    overflow: hidden;
    border-top: 1px solid #121224;
}

非常小或宽的图像现在确实会在包装器的顶部对齐，因为 margin:auto 似乎不起作用。我可以在那里做什么？

Answer 1

.content_page .slide_content .product {
    width:<some width>;
    height:<some width>;
    position:relative;
}

.content_page .slide_content .product > img {
    max-width:100%;
    max-height:100%;
    position:absolute;
    left:0; right:0; top:0; bottom:0;
    margin:auto;
}