flexbox中的图像高度拉伸答案

【问题标题】：Image height stretching in flexboxflexbox中的图像高度拉伸
【发布时间】：2017-02-25 21:00:09
【问题描述】：

所以我已经对此进行了简要研究。我在一个 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>

【问题讨论】：

如果代码中有实际图像会有所帮助，这样我们就可以看到问题所在。请提供有关您当前拥有的内容以及布局的实际外观的更多详细信息。
我已更新您的问题，以便使用占位符图像，但我仍然不清楚您打算实现什么。你用 flex display 虚假地包装了很多元素，我相信这可能没有必要。您能否附上屏幕截图以显示预期的布局？

标签： html image css flexbox

【解决方案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>

【讨论】：

【解决方案2】：

在 CSS 中为您的图像使用最大宽度。并从图像标签中删除宽度和高度属性。或者在你的 img 标签中使用 height 属性 auto 和 css is-

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

【讨论】：