html - 使 flex 元素 sibling 高度相同

Question

我有这个简单的例子:

.container {
  display: flex;
  background-color: #ddd;
  align-items: stretch;
}

.logo {}

.text {
  font-size: 300%;
}

<div class="container">
  <div class="logo"><img src="https://via.placeholder.com/103x121.png/ff0" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

我需要图像获得与右侧同级 div 相同的高度而不是 vv，即将图像缩小到实际文本高度并保持纵横比。

Answer 1

一个 sibling 怎么知道另一个 sibling 的高度？这超出了 CSS 的范围。为此，您需要一个脚本。

但是如果 sibling 引用 parent 的高度，他们可以共享相同的高度。

这可能不是您想要的，但这是一个可能的解决方案:

.container {
  display: flex;
  background-color: #ddd;
  height: 50px;
}

.logo {
  height: 100%
}

img {
  object-fit: contain;
  height: 100%;
}

.text {
  font-size: 300%;
}

<div class="container">
  <div class="logo"><img src="https://via.placeholder.com/103x121.png/ff0" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

另见:One flex/grid item sets the size limit for siblings