如何使用flex设置宽度和高度的div中的header和img？

Question

我有一个任务，我需要将图像和标题放入具有固定宽度的 div 中，每次都会改变高度。 它需要看起来像下面的屏幕截图，但我不知道如何获得这种外观。

这些部分是 flexbox 开始的地方，我将子元素组织成它们应该出现的样子，但是其中的所有内容，我都无法开始工作。 HTML

<main class="card-grid">
      <section class="row-grid"></section>
      <section class="col-grid">                                  
         <div class="card" style="width: 200px; height: 280px;">  
             <img src="littlecolorado.jpg">                
             <h2>Another card</h2></div>                    
       </section>
    </main>

CSS

    .col-grid {
  display: flex;
  flex-flow: column wrap;
  gap: 20px;
  height: 2000px;
}
.col-grid div img {
  width: 200px;
}
.col-grid div h2 {
  display: block;
}

我的文件：

它应该是什么样子：

Answer 1

只需将图像的高度设置为100%即可。 这意味着图像将占用 100% 的可用空间。 如果您想更直接地控制孩子的成长和收缩，请使用flex-shrink和flex-grow 。

https://codepen.io/gallagher7788/pen/bGLRGLx https://css-tricks.com/understanding-flex-grow-flex-shrink-and-flex-basis/

注意： height:100%;width:100%会扭曲您的图像，但这就是您包含的示例的方式。 您可以创建一个带有背景图像的 div 并使用background-size:cover来裁剪图像。