使弹性项目兄弟项目具有相同的高度

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

一个兄弟姐妹如何知道另一个兄弟姐妹的身高？这超出了 CSS 的范围。你需要一个脚本。

但如果兄弟姐妹参考父母的身高，则可以拥有相同的身高。

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

.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>

另请参阅：一个 Flex/Grid 项目设置同级项目的大小限制