CSS:Firefox/Internet Explorer中的flexbox图像缩放问题

Question

我正在尝试使用flexbox在我的内容流中并排放置两个图像.在Chrome/Safari中,它可以正确缩放图像,但在Firefox/IE中,不会考虑宽高比,并且图像会失真.内容流的总宽度取决于浏览器的宽度.当窗口变窄时,需要重新调整图像.

这就是它在Chrome/Safari(WebKit)中的外观:

宽高比受到尊重http://pluto.justdied.com/w2box/data/chrome.PNG

虽然这是它在Firefox/Internet Explorer中的样子:

图像延伸http://pluto.justdied.com/w2box/data/exhibit.PNG

这个2列视图有很长的图像.

HTML标记:

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

CSS如下:

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

我试图调整大小,但我仍然在Firefox/IE中出现某种形式的失真.有关如何修复它的任何想法？我希望使用flexbox来避免使用JavaScript来强制它.

两个源图像共享相同的高度和宽度.

所有反馈和帮助将不胜感激!

谢谢!

Answer 1

我没有太多关注你的具体情况,但我在试图解决类似的问题时遇到了你的问题,其中Flex容器内的图像在Firefox上有偏差.

我的解决方案是添加object-fit: contain到图像并修复FF中的纵横比.

如果有帮助,迟到总比没有好!

Answer 2

将您的img包装在一个块级元素中。（我只是有这个完全相同的问题）

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

并且您的CSS应该定位到<div>非<img />