Question

我有一个带一个图像和一个段落的div。

<div id="container">
  <img src="..." />
  <p>
    This is my text
  </p>
</div>

我使用flex-box和flex-direction: column对齐它们。

#container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 400px;
}

img {
  max-width: 80%;
  flex-basis: 50%;
}

p {
  flex-basis: 50%;
}

由于img和p都拥有flex-basis 50%，所以我希望它们每个都占据50％的空间。在Firefox中可以使用，但是在Chrome中，图像（在高度上）比容器本身大。

我做了一个jsfiddle来演示这一点：https://jsfiddle.net/q2esvro9/1/

如何从Chrome的Firefox中获取行为？

（另一个有趣的事实：在Internet Explorer 11中，图像和文本占据相同的空间，但是图像的宽度被拉伸。这意味着对于非常简短的CSS代码而言，这是3种不同的行为）

#container {
  display: flex;
  align-items: center;
  align-content: center;
  text-align: center;
  flex-direction: column;
  border: solid 2px red;
  height: 300px;
  width: 400px;
}

img {
  max-width: 80%;
  flex-basis: 50%;
}

p {
  flex-basis: 50%;
  border: solid 2px green;
}

<div id="container">
  <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" />
  <p>
    This is my text
  </p>
</div>

Answer 1

主要浏览器之间存在flexbox渲染变体。

处理图像时，变化的数量会增加。

我发现在所有浏览器中都能正常工作的是不在flex formatting context中使用img元素（即，不要使它们成为弹性项目）。

相反，将#container { display: flex; align-items: center; align-content: center; text-align: center; flex-direction: column; border: solid 2px red; height: 300px; width: 400px; } #container > div { flex: 0 0 50%; /* 1 */ min-height: 0; /* 2 */ } img { height: 100%; } p { flex-basis: 50%; border: solid 2px green; }包裹在div元素中，使div成为flex项，并将图像保留在block formatting context中。

<div id="container">
  <div>
    <img src="https://image.freepik.com/free-icon/apple-logo_318-40184.jpg" />
  </div>
  <p>
    This is my text
  </p>
</div>

fetch()

注意：

Flexbox列中的图像无法在Chrome中正确呈现

1 个答案: