使弹性项目兄弟姐妹具有相同的高度 [英] Make flex item siblings the same height

问题描述

我有一个简单的例子:

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

.logo {}

.text {
  font-size: 300%;
}

<div class="container">
  <div class="logo"><img src="https://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

我需要使图像的高度与右侧而不是vv的同级div相同，即将图像缩小到实际的文字高度并保持宽高比.

I need image to get same height as sibling div on right side not vv, i.e. shrink image to actual text height and keep aspect ratio.

推荐答案

一个兄弟姐妹应该如何知道另一个兄弟姐妹的身高?这超出了CSS的范围.您将需要一个脚本.

How is one sibling supposed to know the height of another sibling? That's outside the scope of CSS. You'll need a script for that.

但是，如果两个兄弟姐妹都引用其父辈的身高，则他们可以共享相同的身高.

But both siblings can share equal height if they refer to the height of their parent.

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

This may not be what you want, but here's one potential solution:

.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://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

另请参阅:一个弹性项目设置了兄弟姐妹的身高限制

这篇关于使弹性项目兄弟姐妹具有相同的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！