在flexbox中伸展图像高度

Question

所以我已经对此进行了简要的研究。我把一个img放在div中并使img宽度达到100％，这应该会对高度产生影响。我不明白这里发生了什么。我只需要在下面的弹性框中保持我的图像保持适当的宽高比。

.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。 在margin:auto上执行您想要的.topa就足够了......

这是一个css-tricks article来解释Flexbox如何工作

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

在CSS中使用max-width作为图像。并从图像标记中删除宽度？和高度属性。或者在你的img标签中使用height属性auto，而css是 -

.topa div img {
    Max-width: 100%;
    Height:auto;
}