圖像彈性項目不會縮小彈性框中的高度

Question

我有一個包含img flex項目的flex容器。

我希望這個img忽略它的內在高度（90px），以便高度可以縮小以匹配兄弟的flex項目高度（根據默認的align-items: stretch樣式）。

 .container { border: 1px solid; display: flex; } .item { border: 1px solid; } .content { width: 200px; height: 50px; background-color: hotPink; } 

 <div class="container"> <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"> <div class="item"> <div class="content"></div> </div> </div> 

如果我們將img換成div我們可以看到所需的行為：

 .container { border: 1px solid; display: flex; } .item { border: 1px solid; } .dynamicHeightContent { width: 120px; height: 100%; background-color: green; } .content { width: 200px; height: 50px; background-color: hotPink; } 

 <div class="container"> <div class="item"> <div class="dynamicHeightContent"></div> </div> <div class="item"> <div class="content"></div> </div> </div> 

我在img上嘗試過min-height: 0 ，但無濟於事。

• 什么是適用於img而不是div的特殊行為？
• 我們如何選擇退出img的特殊行為，使其表現得像其他彈性項目（如div ）？ 如果沒有辦法選擇退出，是否有建議的解決方法？

請注意，雖然img不會縮小其高度，但它確實會增長 ：

 .container { border: 1px solid; display: flex; } .item { border: 1px solid; } .content { width: 200px; height: 300px; background-color: hotPink; } 

 <div class="container"> <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"> <div class="item"> <div class="content"></div> </div> </div> 

注意：我很高興忽略img的寬高比。 我打算避免通過object-fit: cover來扭曲img 。

Answer 1

我想你是以錯誤的方式看待這個。

圖像本身高90px，這意味着flex項目的內容高度為90px（因為您的圖像是flex項目）。 因此，右側的div與圖像高度匹配，因為它高於div的高度，而不是相反。

可以把它想象成將flex項目（圖像）的高度設置為90px。 因此，除非將其設置為較小的高度，否則它不會收縮。 即使您沒有明確地將圖像高度設置為90px，但它自然是90px，因此它被隱式設置，這會導致混淆。 因此，雖然它的高度超過90px，但它不會低於它，因為這是flex項目內容的高度。

如果您將它換成div並且它的工作方式與您想象的一樣，因為.item div上沒有設置高度項，即flex項。

Answer 2

請注意，在你的榜樣，該item是Flex項目 ，而不是content -你應該檢查的STRECH行為item在這里。

---

我們如何選擇退出img的特殊行為，使其行為與其他flex項目（如div）一樣？

它的行為與其他彈性項目一樣 - <img>作為彈性項目可能不是很有用，但拉伸行為可以正常工作：

• 如果圖像的高度高於item ，則item 延伸到圖像的高度
• 如果圖像的高度低於item ，則圖像會拉伸到content的高度，從而打破其寬高比。

見下面的演示：

 .container { border: 1px solid; display: flex; } .item { background: cadetblue; } .content { width: 200px; background-color: hotPink; } img { display: block; } 

 <h2>Small content</h2> <div class="container"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"> <div class="item"> <div class="content">some text here some text here some text here </div> </div> </div> <br/> <h2>Large Content</h2> <div class="container"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"> <div class="item"> <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div> </div> </div> 

我在img上嘗試過min-height: 0 ，但無濟於事。

min-height: 0沿着flex方向給予flexbox ，以覆蓋默認的自動行為（對於行方向 ，屬性是min-width ） - 這在橫軸上不起作用。

您可以在下面看到詳細信息和一些示例：

• Flexbox會影響溢出包裝行為

• Flexbox調整大小和可滾動溢出

• 為什么彈性項目不會縮小內容大小？

---

將圖像包裝在容器中

現在將<img>包裝在div中並查看相同的情況 - 拉伸行為再次良好：

 .container { border: 1px solid; display: flex; } .item { background: cadetblue; } .content { width: 200px; background-color: hotPink; } img { display: block; } 

 <h2>Small content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here </div> </div> </div> <br/> <h2>Large Content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div> </div> </div> 

現在的區別是你現在可以在圖像上成功使用object-fit （如果它是一個flex項，這不能正常工作）：

 .container { border: 1px solid; display: flex; } .item { background: cadetblue; } .content { width: 200px; background-color: hotPink; } img { display: block; width: 100%; height: 100%; object-fit: cover; } 

 <h2>Small content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here </div> </div> </div> <br/> <h2>Large Content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div> </div> </div> 

---

我希望這個img忽略它的內在高度（90px），這樣高度可以收縮以匹配兄弟的彈性項目高度

忽略圖像高度的唯一方法是在圖像包裝器上使用定位 ：

• 相對於其包裝器絕對定位圖像，
• 您可以為圖像包裝器指定寬度，也可以在item上給出flex: 1以獲得水平可用寬度的一半。

見下面的演示：

 .container { border: 1px solid; display: flex; } .item { background: cadetblue; flex: 1; /* equal width for items */ } .content { width: 200px; background-color: hotPink; } .item:first-child { /* image container */ position: relative; } img { display: block; width: 100%; height: 100%; object-fit: cover; position: absolute; /* position absolutely */ top: 0; left: 0; } 

 <h2>Small content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here </div> </div> </div> <br/> <h2>Large Content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div> </div> </div> 

Answer 3

雖然這不是你要問的答案，但div和img實際上表現相同，即如果有高於高度的內容，它會增加高度

例：

 .container { border: 1px solid; display: flex; } .item { border: 1px solid; } .dynamicHeightContent { width: 120px; height: 100%; background-color: green; } .content { width: 200px; height: 50px; background-color: hotPink; } 

 <div class="container"> <div class="item"> <div class="dynamicHeightContent"> akhsdjahskd<br> ajkhsdkjhasd<br> ajshdkahsd<br> ajsgdjgad<br> ajshdasjdh<br> </div> </div> <div class="item"> <div class="content"></div> </div> </div> 

因為你堅持認為object-fit應該解決它，你可以嘗試這個，正如你所看到的， object-fit只有在設置高度和寬度時才有效，否則瀏覽器會嘗試使其“保持縱橫比”，只需嘗試要從css中刪除高度或寬度（一次一個），您將看到此效果

 .container { border: 1px solid; display: flex; } .item { border: 1px solid; } img.item { height: 50px; width: 200px; object-fit: cover; } .content { width: 200px; height: 50px; background-color: hotPink; } 

 <div class="container"> <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"> <div class="item"> <div class="content"></div> </div> </div>