html - 图像在 flexbox 中自动拉伸(stretch)

Question

我想知道为什么我放入这个带有 display flex 的 div 容器中的任何图像都会自动拉伸(stretch)？如果我要为它设置一个宽度，我不能用 justify-content 将它居中。

#container {
  display: flex;
  justify-content: center;
}

#container div {
  padding: 25px;
  background: blue;
  color: white;
  width: 500px;
  display: flex;
  flex-direction: column;
}

#container div h1 {
  display: flex;
  justify-content: center;
}

#container input,
#container button {
  width: 75%;
}

#container img {
  display: flex;
  justify-content: center;
}

<div id="container">
  <div>
    <h1>a</h1>
    <img src="https://placehold.it/350x150">
    <input type="text" name="a">
    <input type="text" name="b">
    <button>a</button>
  </div>
</div>

https://jsfiddle.net/nqt8bw4z/自动拉伸(stretch) https://jsfiddle.net/nqt8bw4z/2/固定宽度但不居中

Answer 1

flex 容器的初始设置是 align-items: stretch .这意味着 flex 元素将扩展容器的 cross axis 的全长。 .这将是容器在 flex-direction: row 中的高度和在 flex-direction: column 中的宽度。

由于您使用的是列向 flex 容器，因此默认情况下图像会水平拉伸(stretch)。您可以用另一个值覆盖此设置。试试 align-items: flex-start 或 center。

#container {
  display: flex;
  justify-content: center;
}

#container div {
  display: flex;
  flex-direction: column;
  align-items: center;  /* NEW */
  width: 500px;
  padding: 25px;
  background: blue;
  color: white;
}

#container div h1 {
  display: flex;
  justify-content: center;
}

#container input,
#container button {
  width: 75%;
}

#container img {
  display: flex;
  justify-content: center;
}

<div id="container">
  <div>
    <h1>
      a
    </h1>
    <img src="http://placehold.it/350x150" />
    <input type="text" name="a" />
    <input type="text" name="b" />
    <button>
      a
    </button>
  </div>
</div>