Faire en sorte que les frères et sœurs des éléments flexibles aient la même hauteur

Question

J'ai un exemple simple :

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

J'ai besoin que l'image ait la même hauteur que la div sœur sur le côté droit et non vv, c'est à dire que l'image soit réduite à la hauteur réelle du texte et que le rapport d'aspect soit conservé.

Answer 1

Comment un membre de la fratrie est-il censé connaître la taille d'un autre membre de la fratrie ? Ce n'est pas du ressort des CSS. Vous aurez besoin d'un script pour cela.

Mais les deux frères et sœurs peuvent avoir la même taille s'ils se réfèrent à la taille de leur parent.

Ce n'est peut-être pas ce que vous souhaitez, mais voici une solution possible :

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

Voir aussi Un point de flexion fixe la limite de hauteur pour les frères et sœurs

Answer 2

Utiliser le même font-size valeur de l'image height mais ne peut l'être % unités.

.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

Lorsque vous spécifiez display:flex dans le conteneur parent généralement les éléments enfants peuvent être dimensionnés en spécifiant une hauteur fixe du conteneur parent et en définissant les éléments enfants en conséquence à l'aide d'une fonction flex-direction par défaut row comme l'a suggéré @Michael_B.

Answer 4

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