Firefox Stretches an Element with a Flexbox Center

Question

I am trying to center an element (im my case the image) with an arbitrary size inside the field. Everything works fine in Webkit browsers, but Firefox stretches images that are longer than they are wide.

To illustrate the problem, I create 3 divin the form of boxes, each of which contains an image of a different size. All fields are set to a fixed width and height, and several flexbox rules are used to center the image both vertically and horizontally.

* {
  box-sizing: border-box;
}

.box {
  display: flex;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
  float: left;
  margin-right: 50px;
}

.box img {
  max-width: 100%;
  max-height: 100%;
}

<div class="box">
  <img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
  <img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
  <img src="http://dummyimage.com/150x300/eeeeee.png">
</div>

Run codeHide result

img , ( , ), . Webkit. , Firefox , , . Firefox , Webkit?

Answer 1

"object-fit: " :)

.box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

http://jsfiddle.net/xjwguxs6/

Answer 2

flex-basis: 100% , flex. , , flex-basis: 100% nth-child(3)

.box:nth-child(2) img {
  flex-basis: 100%;
}

* {
  box-sizing: border-box;
}
.box {
  display: flex;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  justify-content: center;
  align-items: center;
  float: left;
  margin-right: 50px;
}
.box img {
  max-width: 100%;
  max-height: 100%;
}
.box:nth-child(2) img {
  flex-basis: 100%;
}

<div class="box">
  <img src="http://dummyimage.com/150x150/eeeeee.png">
</div>
<div class="box">
  <img src="http://dummyimage.com/300x150/eeeeee.png">
</div>
<div class="box">
  <img src="http://dummyimage.com/150x300/eeeeee.png">
</div>

Hide result