0

The following code works in all modern browsers that I've tested (safari, chrome and firefox) except internet explorer. I'm trying to vertically and horizontally center an image inside logo. The problem is that the img overflows the container which is 50px 50px. If I remove flexbox from the css, the image does not overflow, but then it is no longer centered.

I've had a look at Flexbugs to try and solve the issue. But no luck. Any suggestion is much appreciated.

html

<div class="content">
  <ul>
    <li>
      <section class="post">
        <div class="post-header">
          <div class="logo">
            <img src="#" alt="">
          </div>
        </div>
      </section>
    </li>
  </ul>
</div>

css

.content {
  max-width: 400px;
  padding-left: 1em;
  padding-right: 1em;
}
.logo {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid #000;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  float: left;
  height: 50px;
  width: 50px;
}
img {
  max-height: 100%;
  max-width: 100%;
}
ECsAUtaVku
  • 405
  • 1
  • 3
  • 14
  • How big is the image? – Paulie_D Mar 02 '16 at 17:01
  • 1
    Can't reproduce the problem. Please post a demo. – Michael Benjamin Mar 02 '16 at 17:01
  • @Paulie_D The images are all of different sizes. I've specified the height and width of the container so they automatically resize. – ECsAUtaVku Mar 02 '16 at 17:05
  • 1
    Here's your code with a 400x400 image. Not overflowing in IE11. https://jsfiddle.net/smk2bq8z/3/ – Michael Benjamin Mar 02 '16 at 17:07
  • 1
    @Michael_B I was just putting together a demo. You are right. I tried your fiddle in Ie and it works so it must be something else lurking around in my code. Many thanks. – ECsAUtaVku Mar 02 '16 at 17:10
  • @Michael_B I figured out what the real problem was. It had to do with max-height, max-width. I amended my css by looking at this [thread](http://stackoverflow.com/questions/787839/resize-image-proportionally-with-css) Appreciate the help. – ECsAUtaVku Mar 02 '16 at 17:49

0 Answers0