使彈性項目兄弟姐妹的高度相同

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>