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

Question

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

这些部分是 flexbox 开始的地方，我将 child 元素组织成它们应该出现的样子，但其中的所有内容，我无法开始工作。 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% 的可用空间 space。如果您想更直接地控制 children 的增长和收缩，请使用 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 裁剪图像。

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

How do I fit header and img in div with set width and height with flex?

html

javascript

css

flexbox