具有圖像子項的Flex項目不會從其原始寬度調整

Question

我正在嘗試創建一個簡單的標題，並且因爲它佔用了比所需空間更多的空間而導致徽標圖像出現問題。

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 50px; 
 
} 
 
.logo { 
 
    padding: 5px; 
 
} 
 
img { 
 
    height: 100%; 
 
} 
 
.content { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="logo"><img src="http://placehold.it/350x150"/></div> 
 
    <div class="content">content</div> 
 
</div>

正如你所看到的，「內容」文本不放在靠近的標誌，因爲它的商標包裝的寬度等於圖像的大小之前，它會通過CSS調整大小。

我注意到，如果我將height: 100%設置爲.logo元素，情況會好一些，但是這樣做，「內容」文本會重疊圖像。

我該如何解決？

Answer 1

這裏有兩種方法來解決這個問題：

方法＃1 –刪除多餘的包裝。使圖像本身成爲彈性項目。

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 50px; 
 
} 
 
img { 
 
    height: 100%; 
 
} 
 
.content { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <img src="http://placehold.it/350x150"/><!-- div wrapper removed --> 
 
    <div class="content">content</div> 
 
</div>

方法＃2 –定義爲圖像包裝的高度。 （沒有變化的HTML。）

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 50px; 
 
} 
 

 
.logo { 
 
    height: 100%; /* new */ 
 
    border: 1px dashed red; 
 
} 
 

 
img { 
 
    height: 100%; 
 
} 
 

 
.content { 
 
    padding: 5px; 
 
    margin-left: 5px; 
 
    border: 1px dashed red; 
 
}

<div class="wrapper"> 
 
    <div class="logo"><img src="http://placehold.it/350x150" /></div> 
 
    <div class="content">content</div> 
 
</div>

Answer 2

你必須明確地設定圖像高度以像素爲單位。 height: 100%將使用圖像原始高度，而不是其容器高度。

我在柔性容器中添加了justify-content和align-items，所以事情得到了正確的定位。

.wrapper { 
 
    display: flex; 
 
    flex-direction: row; 
 
    height: 50px; 
 
    justify-content: flex-start; 
 
    align-items: flex-start; 
 
} 
 
.logo { 
 
    padding: 5px; 
 
} 
 
img { 
 
    max-height: 50px 
 
} 
 
.content { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="logo"><img src="http://placehold.it/350x150"/></div> 
 
    <div class="content">content</div> 
 
</div>