一個柔性包裝元素中設置圖像的高度

Question

如果我創建使用Flex盒包裝的div的2x2的網格，然後將圖像中的每個格： -

<div id="wrapper"> 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
</div> 

#wrapper { 
    display: flex; 
    flex-wrap: wrap; 
    height: 100vh; 
    background-color: burlywood; 
} 
.item { 
    flex-grow: 1; 
    width: 50%; 
    background-colour: bisque; 
} 

如果圖像的原始高度比Flex項目更深，它會將我的內容推向比我設置包裝的100vh更深的地方。

我希望每個圖像都填充其flex元素div的高度，在本例中爲屏幕高度的50％，圖像寬度爲正確的比例。

我試過將圖像高度設置爲其容器的100％，但我無法使其工作。 （除非圖像原生高度較短，則會展開以適合）。

它也適用，如果我明確地設置Flex項目divs的高度爲33.333％，但這似乎不是對我來說正確的解決方案。

Answer 1

您只需設置圖像的高度，使其保持正確的比例。將以下類添加到您的CSS，以應用50vh的高度，如果我正確理解了您的問題，我認爲您的問題將得到解決。

.item img { 
    height:50vh; 
} 

你可以隨時調整以獲得你需要的東西。

希望這會有所幫助。

Answer 2

另一種解決方案是將.item高度設置爲50％，而給予.item img最大高度，就像這樣：

#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    height: 100vh; 
 
    background-color: burlywood; 
 
} 
 
.item { 
 
    flex-grow: 1; 
 
    width: 50%; 
 
    background-color: bisque; 
 
    height: 50%; 
 
} 
 
.item > img { 
 
    max-height: 100%; 
 
}

<div id="wrapper"> 
 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
 
    <div class="item"><img src="http://via.placeholder.com/100x500"></div> 
 
</div>

這裏的a fiddle如果這是你的偏好。