图像溢出它们的容器答案

【问题标题】：Images overflow past their container图像溢出它们的容器
【发布时间】：2020-10-14 02:16:52
【问题描述】：

我正在尝试将一组图像放入其容器中的网格中，但由于某种原因，图像垂直溢出其容器。

我怎样才能让他们调整大小以适应父母的身高？

.images-container {
  height: 70px;
  background-color: blueviolet;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
}

.images-column {
  display: flex;
  flex-direction: column;
}

img {
  width: 100%;
  height: auto;
}

<div class="images-container">
    <div class="images-column">
        <img src="https://i.stack.imgur.com/mCwEU.png" />
        <img src="https://i.stack.imgur.com/mCwEU.png" />
        <img src="https://i.stack.imgur.com/mCwEU.png" />
        <img src="https://i.stack.imgur.com/mCwEU.png" />
  </div>
    <div class="images-column">
        <img src="https://i.stack.imgur.com/mCwEU.png" />
        <img src="https://i.stack.imgur.com/mCwEU.png" />
        <img src="https://i.stack.imgur.com/mCwEU.png" />
        <img src="https://i.stack.imgur.com/mCwEU.png" />
  </div>
</div>

我希望图像垂直适合彩色区域，并在溢出时允许水平滚动。

这是完整的stackblitz。

【问题讨论】：

标签： html css angular flexbox

【解决方案1】：

您可以通过设置图像容器的溢出属性来实现这一点

.images-container {
  height: 70px;
  background-color: blueviolet;
  display: flex;
  flex-direction: row;
  justify-content: stretch;
  overflow:auto;
}

Here is a jsfiddle solution for your question

【讨论】：

这只是隐藏了图像。我希望调整图像大小，使.image-columns 与.images-container 的高度相同。
在我的示例中，图像完全适合父母的宽度。我希望他们也这样做，但要使用父母的身高。

【解决方案2】：

我认为你应该添加

flex-direction: row;
overflow-x: scroll;

到您的图像列字段

【讨论】：

那不行，请在发布之前尝试测试您的答案，您可以使用Codepen 来测试它们

【解决方案3】：

我最终使用了flex-wrap: wrap：

<div
  style="
    margin-top: 5px;
    height: 500px;
    background-color: blueviolet;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  "
>
  <img
    *ngFor="let image of allImages"
    [src]="image"
    style="
      object-fit: contain;
      max-height: 100%;
      height: auto;
      width: calc(25% - 10px);
      margin: 5px;"
  />
</div>

【讨论】：