Сделать братьев и сестер с одинаковым ростом

Question

У меня есть простой пример:

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

Мне нужно, чтобы изображение получало ту же высоту, что и соседний элемент div с правой стороны, а не vv, т.е. сжимал изображение до фактической высоты текста и сохранял соотношение сторон.

Answer 1

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

.text {
  font-size: 300%;
}
img {
    height: 100%;
    display: block;
}

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

Answer 2

Используйте то же значение font-size для изображения height, но не может быть % единиц.

.container {
  display: flex;
}

.logo img {
  height: 3em;
  width: auto;
}

.text {
  font-size: 3em;
}

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

Answer 3

Когда вы указываете display:flex в родительском контейнере, как правило, размер дочерних элементов можно определить, указав фиксированную высоту родительского контейнера и установив дочерние элементы соответственно с flex-direction по умолчанию, равным row, как предложено @Michael_B.

Answer 4

Как один брат должен знать высоту другого брата?Это выходит за рамки 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://upload.wikimedia.org/wikipedia/commons/0/07/Stora_Enso_web_logo.png" alt="test logo"></div>
  <div class="text">TEXT</div>
</div>

См. Также: Один элемент flex задает предел высоты для братьев и сестер