html - 图像未正确缩放

Question

当我在 Logo 前使用伪元素使其成为vertical-center。不再缩放，它只是以较小的宽度滑出其父元素。

<div id="header">
  <div id="logo">
    <img src="http://abload.de/img/unbenannt-1bmq5b.png" alt=""/>
  </div>
</div>

here is a fiddle

Answer 1

我假设您已经使用伪元素来“vertical-center”标志。伪元素充当 inline-block 元素。这样通过 vertical-align: middle 规则，您可以将另一个 inline-block 元素( Logo )放在中间。它就像一个魅力

在您的情况下添加负边距以适应屏幕中的两个元素。

#header #logo:before {
    margin-left: -4px;
}

FIDDLE