CSS: Image scaling issue with flexbox in Firefox/Internet Explorer

Question

I'm trying to use flexbox to place two images side by side in my content flow. In Chrome/Safari it scales the images properly, but in Firefox/IE the aspect ratio is not respected and the images are distorted. The overall width of the content flow depends on the width of the browser. The images therefor needs to readjust as the window gets narrower.

This is how it looks in Chrome/Safari (WebKit):

Aspect ratio respected http://pluto.justdied.com/w2box/data/chrome.PNG

While this is how it looks in Firefox/Internet Explorer:

image stretches http://pluto.justdied.com/w2box/data/exhibit.PNG

This 2 column view comes in a long line of images.

The HTML markup:

<div class="grid">
  <img src="../images/mille_bornes_02.jpg">
  <img src="../images/mille_bornes_08.jpg">
</div>

And the CSS is as follows:

.grid {
  z-index: 1;
  margin: 0px 0px 16.5px;
  position: relative;
  flex-direction: row;
  width: 100%;
  height: 100%;
  display: flex;
  padding: 0;
  border: 0;
}
.grid img {
  position: relative;
  display: block;
  margin-left: 16.5px;
  height: 100%;
  width: 100%;
}
.grid > img:first-child {
  margin-left: 0px;
}

I've tried to fiddle with the sizing, but I still end up with some form of distortion in Firefox/IE. Any ideas about how I can fix it? My hope was to use flexbox to avoid having to brute force it with JavaScript.

Both the source images share the same height and width.

All feedback and help would be greatly appreciated!

Thank you!

Answer 1

wrap your img's in a block level element. (I just had this exact same issue)

<div class="grid">
  <div><img src="../images/mille_bornes_02.jpg"></div>
  <div><img src="../images/mille_bornes_08.jpg"></div>
</div>

and your css should target the <div> not the <img />