使弹性项目兄弟姐妹的高度相同

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> 

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

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

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

Answer 2

为图像height使用相同的font-size值，但不能为%单位。

 .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默认为@Michael_B建议row 。

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>