Question

我现在正在学习Flexbox布局，因为在有人放弃了它之后必须接管一个项目并且遇到了一个错误，其中flex-item图像似乎没有按照响应式设计来扩展它们的高度。宽度可以很好地缩放，但高度从不缩放并保持固定在原始高度。

我有一个非常简单的设置：

<div class="my-container">
  <img src="..." />
  <img src="..." />
  <img src="..." />
</div>

CSS非常基础：

.my-container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}

.my-container img {
  display: block;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  max-width: 100%;
}

基本上，单列（移动视图 - iphone）。以上工作在Firefox中看起来很棒。在Chrome（版本48.0）上，图像高度为 NOT 缩放。

E.g。第一个<img>是940px x 500px宽的图像，在桌面上看起来很棒，但在Chrome中它是300px x 500px 。宽度是缩放但高度不是？第2张和第3张图像~460px并且彼此相邻显示。

奇怪的是，如果我使用 flex-direction：row ，那么Chrome会正确渲染并且图像高度看起来可以缩放，但Firefox会破坏并出现同样的问题！

我在这里吃午饭吗？

值得庆幸的是，移动设备上的所有RENDERS OKAY。仅在调整浏览器窗口大小时才会出现这种情况。：/

Answer 1

我认为这是最新生产铬（48）的错误。在控制台中运行它＆＃34;解决＆＃34;你的问题（假设你有jquery运行）：$('img').css('min-height',0);

如果是这样（或者），你应该能够在css中为你的图像提供最小高度0。在解决这个问题之前，这应该可以解决这个问题。

在https://github.com/angular/material/issues/6841

上找到了这个

Chrome是一款出色的浏览器，但偶尔会有flex-box支持与更新= /

Answer 2

这是所需的输出吗？

.container {
  width: 600px;
  margin: 10px auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

<div class="container">
  <div><img src="https://placehold.it/150x150/E8117F/FFFFFF"></div>
  <div><img src="https://placehold.it/100x100/11E87F/000000"></div>
  <div><img src="https://placehold.it/200x300/117FE8/FFFFFF"></div>
</div>

为什么flex-item图像不能缩放高度？

2 个答案: