时间戳

首页 > 解决方案 > Flexbox 项目没有缩小。初学者

shrink - Flexbox 项目没有缩小。初学者

问题描述

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

我希望底部图像随着窗口大小的调整而缩小。

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

这是我的第一个堆栈溢出帖子，所以请原谅我。

<!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;
}

标签： shrink

解决方案

您可以在类中设置图像的width和height属性.header以使其灵活

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

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

这是一个代码笔

推荐阅读