火狐上在Flexbox中伸展的图像

Question

CSS3的flexbox在Safari和Chrome上运行得很好，但是在火狐上，图像已经被拉伸了。我怎么才能修好这个？

下面是代码示例：

​

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>

​

Answer 1

也许现在它会工作的很好，remove display:-moz-box，你也没有关闭它。你没必要用它。替换此css代码。看起来不错。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;}