Question

CSS3 flexbox在Safari和Chrome上运行良好，但在Firefox上，图像被拉伸。我该如何解决这个问题？

以下是代码示例：

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;}

在Firefox上的Flexbox中伸展的图像

1 个答案: