通过包装使容器的元素填充容器的高度

Question

我在尝试使容器中的项目以我想要的方式占用空间时遇到问题。主要问题似乎是flex box和css grid会根据宽度而不是高度的变化进行调整，因为我需要相反的行为。这基本上是我希望我的元素做的事情

查看想要的效果here。

我尝试过同时使用 flex box 和 css grid。 这是我当前的代码，也包含我之前尝试的一些残余。它只是使图像以实际大小显示。 媒体容器的高度通过 javascript 更改。

.display-img {
  padding:0px;
  margin-top:-4px;
  margin-bottom:-4px;
  flex:0 1 auto;
  height:auto;
}

.media-container{
  width: auto;
  height:800px;
  display:flex;
  //grid-template-rows: repeat(auto-fit,auto);
  //grid-template-columns: repeat(auto-fit,minmax(200px,0.5fr));
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  visibility: hidden;
}

<div class="media-container">
  <img class="display-img" src="assets/projects/feierlichkeiten/23.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/22.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/21.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/20.png"></img>
  <img class="display-img" src="assets/projects/feierlichkeiten/19.png"></img>
</div>

感谢所有有想法的人。

Answer 1

我觉得你的问题不是很清楚。

如果你想要一排图像，它们都具有原始大小，你需要做的就是将 flex 对齐（行和换行）应用到父级并将 flex: auto 和 margin: auto; 添加到子级：

<div class="media-container">
  <img class="display-img" src="https://picsum.photos/160">
  <img class="display-img" src="https://picsum.photos/160/90">
  <img class="display-img" src="https://picsum.photos/150/40">
  <img class="display-img" src="https://picsum.photos/160/100">
  <img class="display-img" src="https://picsum.photos/100/290">
</div>

[添加随机纵横比图像以证明它们都是对齐的，无论您所有图像的大小都具有相同的纵横比，结果将与您的示例图像相同]

.media-container {
  display: flex;
  flex-flow: row wrap;
}

.display-img {
  margin: auto;
  flex: auto;
}

执行以下操作：

• media-container：将 flex flow 设置为 row and wrap，因此当添加更多图像时，如果没有更多可用空间，它们将被放入新行。
• 在图像上，margin auto 将负责对齐每个单元格内的图像（水平和垂直）和flex: auto，这相当于flex: 1 1 auto（意味着 flex 增长和 flex 收缩将设置为一，没有增长，没有收缩和弹性自动[弹性项目的初始主要尺寸]）。

检查this codepen。

Answer 2

你的要求我也很困惑。您发布的要复制的屏幕截图只是 CSS 网格的标准行为。所以也许我误解了。这是具有正确设置的代码笔，用于复制您发布的屏幕截图：

https://codepen.io/doughballs/pen/bGdeBQa

在我们设置的容器上：

main {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border: 2px solid red;
  padding: 20px;
}

这告诉内容至少有 200px 宽，如果没有足够的空间就换行。

在图片上：

img {
  display: block;
  width:100%;
  border: 2px solid black;

}

这是 Jen Simmons 提供的一个很好的资源：

https://www.youtube.com/watch?v=tFKrK4eAiUQ&t=218s

Answer 3

为了您想要的效果，让我们使用一个带有媒体“孩子”的容器，每个孩子都有自己的内容。

<div class="media-container">
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/90">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/150/40">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/160/100">
    </div>
    <div class='media'>
        <img class="display-img" src="https://picsum.photos/100/290">
    </div>
</div>

您要搜索的规则是 'flex-wrap: wrap'

.media-container{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 100%;
}

.media-container .media{
    width: 33%;
}

你可以玩价值观，匹配更适合你的。

请使用 Webpack 作为 css 前缀