显示：弯曲和图像大小/居中

Question

我使用display: flex; 将图像居中并使用max-width / max-height 对其进行调整大小。其中有几张图片——一些宽的，一些高的，一些方形的——我想确保它们的尺寸都足够大，可以查看它们。

我假设，例如，如果图像达到最大宽度而不是高度，它应该与宽度成比例。

这是我遇到的问题。在 chrome 中，它看起来非常适合所有图像。在 Firefox 和 Edge 中，它们是不成比例的。

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
}
.image_block img {
  margin: auto;
  max-width: 170px;
  max-height: 90px;
}

<div class="image_block">
  <img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" />
</div>

我不在乎我最终会得到哪个结果（我可以使用任何一个），但我希望他们三个都保持一致。我该怎么做才能做到这一点？

Answer 1

似乎flexbox 至少目前在浏览器中没有正确缩小图像（具有固有纵横比）！ （更多信息可以看这个discussion）

所以我有两个解决方案：

1. 将flex-basis 设置为img

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
}
.image_block img {
  margin: auto;
  max-width: 170px;
  max-height: 90px;
  flex-basis: 170px;
}

<div class="image_block">
  <img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" />
</div>

1. 用div 标签包裹img。

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
}
.image_block div {
  margin: auto;
}
.image_block div img {
  max-width: 170px;
  max-height: 90px;
}

<div class="image_block">
  <div><img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" /></div>
</div>

另外我建议你使用flexbox 技术而不是使用margin: auto：

.image_block {
  padding: 20px;
  height: 140px;
  background: #eee;
  display: flex;
  justify-content: center;
  align-items: center;
}
.image_block img {
  max-width: 170px;
  max-height: 90px;
  flex-basis: 170px;
}

<div class="image_block">
  <img src="http://www.paulruocco.com/jobjacket/assets/uploads/company_uploads/image_070816132332577fe19495484.png" />
</div>

让我知道您对此的反馈。谢谢！