Question

我有多张不同图像的图像，我需要在概览网格中显示。图像的尺寸和比例完全不同，这些图像的包装总是相同的高度和宽度。

我希望将图像始终放在包装器的中心，但这并不起作用。

我将它用于图像

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

和包装那一个

.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;
}

非常小或宽的图像现在确实在包装器的顶部对齐为边距：自动似乎不起作用。我可以做什么？

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;
}

Answer 2

将左右边距设置为自动并使用垂直对齐中间

.content_page .slide_content .product img {
/* max-height: 100%; */
height: auto;
width: 100%;
display:inline-block;
vertical-align:middle;
margin-left:auto;
margin-right:auto;
float: none;
border: none;
}

定位不同尺寸的图像居中？

2 个答案: