Html 如何使图像适合flex项，并在其祖先上设置最大高度限制？

我有一个可重用的组件来显示两个共享相同形状的水平部分。这两个部分根据内容均匀分布

我将组件发布到

我在中发布了一个具有所需视觉的修改版本，但它在

img

标签上设置了直接限制

max height

max height

限制应在组件级别设置，用作API

一些注意事项：

• 组件中的两个部分具有

  flex:1 auto

  ，是一种实现“按内容均匀分布”的方法
• 由于组件的最大高度受到限制，第二节的标题应为该组件中最长的水平内容。空间应该分布在这周围。但它不是，因为

  对象匹配：contain。无
  对象匹配：包含，图像将完全填充其父div。你可以从中看到它

HTML:

<div class="device">
  <div class="app">

    <div class="component">
      <div class="section section1">
        <div class="logo">
          <img class="image" src="https://www.w3schools.com/css/img_lights.jpg" />
        </div>
        <div class="title">Section One</div>
      </div>
      <div class="section section2">
        <div class="logo">
          <img class="image" src="https://www.w3schools.com/css/img_fjords.jpg" />
        </div>
        <div class="title">Section Two: Another Title Here, Longer than first</div>
      </div>
    </div>

    <div class="another-component">
      Another component
    </div>

  </div>
</div>

.device {
  width: 600px;
  height: 1200px;
}

.app {
  display: flex;
  flex-flow: column nowrap;
  border: thick solid purple;
}

.app > * {
  min-height: 0;
}

.component {
  /*
   * max-height is an API exposed by this component,
   * used by client to restrict max height of component.
   *
   * This API is exposed as raw css style, not an Vue/React prop.
   *
   * As an Vue/React Prop, it is possible to calculate max-height of image
   * from this prop. I think this calculation process  is not maintainable and the result
   * may not accurate.
   *
   * Another way to solve this problem is to treat this max-height as the restriction
   * of image, not the component. But I think that may not be friend to consumer.
   */
  max-height: 120px;
  display: flex;
  border: thick solid lightseagreen;
}

.component > * {
  min-width: 0;
  flex: 1 1 auto;
}

.section1 {
  background-color: yellow;
}

.section2 {
  background-color: green;
}

.section {
  display: flex;
  flex-flow: column nowrap;
  /* Align from bottom to top, to fix title at the bottom,
   * even if there is no logo for this section.
   */
  justify-content: flex-end;
}

.section > * {
  min-height: 0;
  text-align: center;
}

.title {
  /* Don't shrink title */
  flex: 0 0 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logo {
  opacity: 0.5;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.logo > * {
  min-height: 0;
  min-width: 0;
}

.image {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  /* max-height: 70px; */
}

.another-component {
  font-size: 30px;
  min-height: 50px;
  background-color: darkslateblue;
}