css3 - Images stretching in Flexbox on Firefox -

css3 flexbox working fine on safari , chrome, on firefox images stretched. how can fixed this?

here example of code:

body{    padding: 30px;  }  .img-wrapper{    display: -webkit-flex;    display: flex;    display:-moz-box    -webkit-align-items: center;    align-items: center;    -webkit-justify-content: center;    justify-content: center;    height: 350px;    background-color: #eee;  }

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>    <div class="row">    <div class="col-xs-4">      <div class="img-wrapper">        <img class="img-responsive" src="https://www.googledrive.com/host/0b_o3i6x00l9pufrrlwutm0wzug8" alt="">      </div>    </div>    <div class="col-xs-4">      <div class="img-wrapper">        <img class="img-responsive" src="https://www.googledrive.com/host/0b_o3i6x00l9pmjjqsnd6uvu4oxc" alt="">      </div>    </div>    <div class="col-xs-4">      <div class="img-wrapper">        <img class="img-responsive" src="https://www.googledrive.com/host/0b_o3i6x00l9pzjfiuy03uw9fogm" alt="">      </div>    </div>  </div>

maybe working fine remove display:-moz-box not close it. no need use it. replace css code. work. https://jsfiddle.net/hamzanisar/w6na28km/

body{       padding: 30px;     }       .img-wrapper{   display:-webkit-flex;   display:flex;   -webkit-align-items: center;   align-items: center;   -webkit-justify-content: center;   justify-content: center;   height: 350px;   background-color: #eee;   position:relative; } .img-wrapper img{    bottom: 0; height: auto; left: 0; margin: auto; max-height: 100%; max-width: 100%; position: absolute; right: 0; top: 0; width: auto;}