Flexbox 项目不收缩。初学者

Question

我在一个 flex 容器中有两个 jpeg "header"，图像垂直堆叠，顶部图像是正方形，底部是一个长的水平矩形。

我希望通过 window 重新调整大小来缩小底部图像。

我无法让它工作，在堆栈流中尝试了很多解决方案。

这是我第一次堆栈溢出post所以请原谅我。

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Clear Cut Legal Video</title>
    <link rel="stylesheet" type="text/css" href="styles/stylesheet.css">
  </head>
  <body>
    <div class="header">
      <img src="images/CCLV.jpeg"
           alt="Clear Cut Legal Logo">
      <img id="tagline"
           src="images/CCLV-tag-line.jpg"
           alt="Clear Cut Legal Tag Line">
    </div>
  </body>
</html>

.header  {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
}

Answer 1

您可以为 .header class 中的图像设置 width 和 height 属性，使它们灵活

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

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

这是一个codepen

Flexbox 项目不收缩。初学者

Flexbox item not shrinking. Beginner

shrink