CODEWITHSUNDEEP
cssfirefoxsafariflexbox
user2389511
user2389511

Reputation: 61

Images stretching in Flexbox on Firefox

CSS3 flexbox is working fine on Safari and Chrome, but on Firefox the images are stretched. How can I fixed this?

Here are the 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>

Upvotes: 1

Views: 1719

Answers (1)

Muhammad Hamza Nisar
Muhammad Hamza Nisar

Reputation: 601

Maybe it will be working fine now remove display:-moz-box you also not close it. You no need to use it. Replace this css code. It will 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;}

Upvotes: 2

Related Questions