如何使超出容器高度的多个图像停止Flexbox？

Question

我的构建Flexbox有问题。

里面有一些图像（每个都在他们自己的DIV元素中，但这不是必需的），一旦他们开始包装，他们就不会缩放到容器的高度并溢出......隐藏溢出是没有解决方案，因为图像需要完全可见。

我让它们在一行中缩放，这很好，但由于它们很小，你再也看不到任何东西了，我希望它们能够包裹但仍保持比例（保持图像比例）。

＆＃13;

＆＃13;

body, html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 300px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100px;
  background: black;
}

.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.box img {
  width: 100%;
  object-fit: contain;
}

＆＃13;

<div class="container">
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
  <div class="box">
    <img src="http://placehold.it/80x80" alt="">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我正在寻找的解决方案是，一旦图像开始包装，它们会缩放尺寸，以便形成2行缩小图像。

谁能告诉我我的大脑在这个过程中卡在哪里？我使用flexbox属性（如缩小，基础等）尝试了很多不同的配置。

问候 Alkahna

Answer 1

您可以考虑将图像添加为背景并调整背景属性以保持比例：

＆＃13;

＆＃13;

body,
html {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 400px;
}

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100px;
  background: black;
}

.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}

.box img {
  width: 100%;
  object-fit: contain;
}

＆＃13;

<div class="container">
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
  <div class="box" style="background-image:url(http://placehold.it/80x80)">

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;