Question

我正在尝试使用flexbox和object-fit: contain通过更改线条高度来构建照片马赛克（从而调整宽度以保持纵横比）。

这适用于Firefox，但不适用于Chrome，iExplorer，Edge，图片缩小到位。在调整图像大小时，间距会增加。

我在JSFiddle中使用以下代码

作了示例

容器是一行图像
image1 / 2是容器中的图像
img包含实际图片

HTML

<div id=container class=lContainer>
  <div id=image1 class=imageThumb>
    <img src="http://lorempixel.com/300/200">
  </div>
  <div id=image1 class=imageThumb>
    <img src="http://lorempixel.com/300/200">
  </div>
</div>

CSS

.lContainer {
  display: flex;
  justify-content: center;
  width: auto;
}

.imageThumb {
  height: 100%;
  padding: 2px;
}

img {
  object-fit: contain;
  height: 100%;
  width: auto;
  min-width: auto;
}

JS（调整图片大小以显示效果）

$(document).ready(function() {
  var divID = document.getElementById('\container')
  var el = $(divID);
  curHeight = 200
  goalHeight = 150;

  el.height(curHeight).animate({
    height: goalHeight
  }, 600, function() {
    el.css('height', goalHeight);
    $(el).css("opacity", 0.99);
    console.log("done")
  });
});

我注意到在Chrome图片上切换填充会产生预期的结果（例如，如果我在检查器中关闭/打开填充，结果会更改为预期结果，则页面未正确加载。

使用在线自动修复程序来考虑其他浏览器不会改变任何事情。

我错过了什么？谢谢你的帮助！

使用object-fit调整图像大小：在flexbox中包含仅适用于Firefox

0 个答案: