html - 水平和垂直居中自动调整大小的图像

Question

我进行了大量搜索并找到了该问题的不少答案，但当我在我的特定设置中尝试时，它们似乎都不起作用。这是我要解决的问题的 JSFiddle:

http://jsfiddle.net/kr394ye2/1/

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    float: left;
}
.classB {
    width: auto;
    height: auto;
    max-width: 50px;
    max-height: 50px;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg"></img>
</div>

我试图让图像自动调整大小以适应它所在的 div，使其在 div 中水平和垂直居中。我无法将图像作为 div 的背景。

我尝试过使用各种类型的显示(内联、内联 block )自动设置边距。我试过文本对齐属性，以及垂直对齐。我试过中心标签。我尝试过的都没有用。

解决方案应使图像水平和垂直居中。

Answer 1

您可以使用内联 block + 伪元素技巧。

.classA {
    background-color: yellow;
    width: 50px;
    height: 50px;
    float: left;
    text-align: center;
    font-size: 0;
}
.classA:after {
    content: "";
    height: 100%;
    display: inline-block;
    vertical-align: middle;
}
.classB {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    display: inline-block;
    vertical-align: middle;
}

<div class="classA">
    <img class="classB" src="https://www.google.com/logos/doodles/2015/ida-b-wells-153rd-birthday-4853060954226688-hp.jpg">
</div>

请注意，该解决方案仅在图像是容器内的唯一子项且容器具有已知高度集时才有效。

顺便说一句<img>是自闭标签，<img></img>是错误的语法，只需使用 <img src="">或 <img src="" /> .