Images stretching in Flexbox on Firefox

Question

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>

Possible duplicate of [CSS3 Flexbox maintain image aspect ratio](http://stackoverflow.com/questions/30788131/css3-flexbox-maintain-image-aspect-ratio) — Michael Benjamin, Jan 27 '16 at 13:06
Also see this bug report: https://lists.w3.org/Archives/Public/www-style/2012Apr/0719.html — Michael Benjamin, Jan 27 '16 at 13:06

Muhammad Hamza Nisar · Accepted Answer · 2016-01-27T10:59:24.663

2

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

edited Jan 27 '16 at 10:59

answered Jan 27 '16 at 08:14

Muhammad Hamza Nisar

661
3
9
26

Thanks your reply. But image stretch on firefox. – user2389511 Jan 27 '16 at 09:01
i have tested on firefox it's working fine. Test it let me know still giving issue. – Muhammad Hamza Nisar Jan 27 '16 at 09:03
Yeah! still same issue here are the screenshot [link](https://drive.google.com/file/d/0B_o3I6x00l9PVWpuajBmQU5lY0U/view) – user2389511 Jan 27 '16 at 09:16
ok i have updated code check this one: https://jsfiddle.net/w6na28km/1/ it's fine now – Muhammad Hamza Nisar Jan 27 '16 at 10:58
I only had to set max-width and max-height to 100% and it worked! – danpop Jan 07 '20 at 09:42

Images stretching in Flexbox on Firefox

1 Answers1