Question

我使用display: flex;对图像进行居中，并使用max-width / max-height来确定尺寸。有几个这样的图像 - 有些宽，有些高，有些正方形 - 我想确保它们都足够大，可以查看它们。

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

我不关心我最终得到的结果（我可以与之合作），但我希望他们三个都一致。我该怎么做才能做到这一点？

Answer 1

似乎flexbox目前在浏览器中没有正确缩小图像（具有固有的宽高比），至少！（有关详情，请查看此discussion）

所以我有两个解决方案：

为flex-basis

img

＆＃13;

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

＆＃13;

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

＆＃13;

使用img标记包裹div。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

显示：flex＆amp;图像大小/居中

1 个答案: