图像不尊重父 flex 大小

Question

我一直在摸索很长一段时间，试图让这张图片尊重它的父 flex 大小。

场景是，我想构建一个高度为 150px 的组件。该组件将具有两部分的列弹性显示：图像及其描述。我希望每个孩子拥有父母身高的 1/2（弹性：1）。但是，图像不尊重其弹性尺寸！它把它的兄弟姐妹往下推。

我注意到，如果我将 flex: 1 应用于图像本身，这不会发生，但我想了解为什么该图像不尊重其父 flex: 1 （应该在 67.5像素）

谢谢！

* {
  box-sizing: border-box;
}

.carousel {
  width: 150px;
  height: 150px;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  gap: 1rem;
  outline: 1px solid black;
}

.carousel__image-container {
  outline: 1px solid red;
  flex: 1;
}

.carousel__image {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.carousel__description {
  flex: 1;
  display: flex;
  gap: .5rem;
}

<div class="carousel">
    <div class="carousel__image-container">
        <img class="carousel__image"
             src="https://images.unsplash.com/photo-1614006160288-14eba44816d6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=400&q=80"
             alt="Little Cato"
        />
    </div>
    <div class="carousel__description">
      Lorem ipsum dolor sit amet, consectetur.
    </div>
</div>

Answer 1

不使用flex: 1. 图片的大小取决于图片的宽高设置

Answer 2

Flex 实际上并不是问题所在。您的图像具有 3:2 的纵横比，这意味着不可能有 150x67.5 且其形状没有变形或变化，这就是将其同级向下推的原因。

如果您真的想将图像设置为其父高度的 50%，则应将 height: 50% 设置为您的 <div class="carousel__image-container">

你也可以试试：

.carousel__image-container {
   outline: 1px solid red;
   height: 50%;
   width: 100%;
}

.carousel__image {
   width: 100%;
   height: 100%;
}