CODEWITHSUNDEEP
htmlcss
Verdemis
Verdemis

Reputation: 287

Image doesn't scale correctly

When I use a pseudo element with before my logo to make it vertical-center. doesn't scale any more, it just slips down out of its parent element in small width. 

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

here is a fiddle

Upvotes: 2

Views: 132

Answers (1)

Jinu Kurian
Jinu Kurian

Reputation: 9426

I assume you have used pseudo element to "vertical-center" the logo. The pseudo element acts as an inline-block element. so that by vertical-align: middle rule, you can bring the other inline-block element (logo) to the middle. it works like a charm

add a negative margin in your case to fit both element in the screen.

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

FIDDLE

Upvotes: 2

Related Questions