Extra vertical space when using fitWidth and img { max-width: 100%; max-height: 100} to adapt the image size to the container size

[Ziiweb]

Hi,

I'm getting extra vertical space between divs when combining fitWidth: true and img { max-width: 100%; max-height: 100% to adapt the image size to the container size.

Here below you have the code. And here you can see it at my site.

I get this gap on FF and Chrome.

This is a screenshot: http://i.stack.imgur.com/D9lkD.png

//INIT
$('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 200,
    gutter: 15, 
    fitWidth: true
   })
//CSS
  .grid {
    margin: 0 auto;
    }

    .grid-item {
      width: 200px;
      margin-bottom: 15px;
      border: 1px solid black; 
      }

      img {
    max-width:100%;
    max-height:100%;

      }

    .grid-item--width2 { 
      width: 415px;
      @media screen and (max-width: 450px) {
    width: 100% !important;
      }
    }
    .grid-item--width3 {
      width: 630px; 
      @media screen and (max-width: 660px) {
    width: 100% !important;
      }
    } 
//HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<div class="grid">
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.1.1/masonry.pkgd.min.js"></script>

  <div class="grid-item">
   <img src="http://www.sermovi.com/uploads/thumbnails_frontend_list/cbbf56aae229162053aaf47f72dfbef0.jpeg">
  </div>

  <div class="grid-item grid-item--width2 grid-item--height2">
   <img src="http://www.sermovi.com/uploads/thumbnails_frontend_list/5d775637c3bdd2b0eaa001521a5c4116.jpeg
">
  </div>

  <div class="grid-item grid-item--height3">
   <img src="http://www.sermovi.com/
/uploads/thumbnails_frontend_list/92fe66099295d97699346ac96c5bfe09.jpeg
">
  </div>

  <div class="grid-item grid-item--height2">
   <img src="http://www.sermovi.com/
/uploads/thumbnails_frontend_list/5dbc6d4175d4d5c7b45588b08e2f5807.jpeg
">
  </div>

  <div class="grid-item grid-item--width3">
   <img src="http://www.sermovi.com/
/uploads/thumbnails_frontend_list/58339c49ccb9128adac7a4aac109d7f8.jpeg
">
  </div>
</div>

[desandro]

I'm sorry to see you're having trouble with Masonry. Could you provide a reduced test case? See Submitting Issues in the contributing guidelines.