html - flexbox 中的图像高度拉伸(stretch)

Question

所以我已经对此进行了简要研究。我在div里放了一个img，把img的宽度设为100%，应该会对高度有影响。我不明白这里发生了什么。我只需要我的图像在以下 flexbox 中保持适当的纵横比。

.container {
  display: flex;
  position: relative;
  flex-flow: row wrap;
  justify-content: center;
  align-items: stretch;
  height: 100vh;
  width: 80%;
  /*padding-top: 2%;
	padding-bottom: 18%;
    margin: 5% auto 8% auto; */
  background-color: white;
  border: 2px solid red;
}
.top {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid blue;
}
.top * {
  1 1 50%;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-content: center;
  height: 100%;
}
.bottom {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
  border: 2px solid orange;
}
.top,
.bottom {
  flex: 0 0 100%;
  height: 50%;
}
.topa {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  width: 50%;
  height: 100%;
  background-color: orange;
}
.topa div img {
  width: 100%;
}

<div id="bigwrap">
  <div class="container">
    <div class="top">
      <div class="topa">
        <div>
          <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
        </div>
        <div>
          <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
        </div>
      </div>
      <div class="topb">
      </div>
    </div>
    <div class="bottom">
    </div>
  </div>
</div>

Answer 1

您没有以正确的方式使用 flexbox。在 .topa 上做你想做的 margin:auto 就足够了......

这是一个css-tricks article很好地解释 flexbox 是如何工作的

.container {
  position: relative;
  height: 100vh;
  width: 80%;
  background-color: white;
  border: 2px solid red;
}
.top {
  border: 2px solid blue;
}
.top * {
  height: 100%;
}
.bottom {
  border: 2px solid orange;
}
.topa {
  width: 50%;
  height: 100%;
  background-color: orange;
  margin: auto;
}
.topa div img {
  width: 100%;
}

<div id="bigwrap">
  <div class="container">
    <div class="top">
      <div class="topa">
        <div>
          <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
        </div>
        <div>
          <img src="http://placehold.it/209x205" width="209" height="205" alt="Picture of kid" />
        </div>
      </div>
      <div class="topb">
      </div>
    </div>
    <div class="bottom">
    </div>
  </div>
</div>