css - 在 div 中居中对齐图像

Question

HTML

<div class="image-container">
   <img class="image" src="image.png">
</div>

CSS

.image-container {
    width: 95px;
    height: 95px;
    background: #000000;

    display: -webkit-flex;
    display: flex;

    -webkit-align-items: center;
    align-items: center;

    -webkit-justify-content: center;       
    justify-content: center;
}

.image {
    max-width: 95px;
    max-height: 95px;
}

这在 Chrome 和 Safari 上工作正常，但在 Firefox 上不行。它填满了整个 div 并且纵横比没有保持。如何在 Firefox 上运行？

Chrome/Safari

火狐

Answer 1

因为您的 .image 高度拉伸(stretch)图像。像这样更改您的 CSS。

.image {
    width:100%;
}