2張圖片充滿相同高度的全寬

Question

Bonjour，

我有2張圖片，我想並排顯示這些圖片。
我希望他們填充容器的整個寬度和具有相同的高度。

你有任何想法，該怎麼辦呢？
我想保留圖像比例。
綠框代表我的容器（可能是一些DIV）

在此先感謝。

Answer 1

使用max-height並給它的值 - 與圖像max-height: minimum-image-height(from both images)這兩個圖像相比，高度的最小值。

在下面的代碼片段看一看：

.image { 
 
    max-height: 200px; 
 
}

<div class="box"> 
 
    <img src="http://placehold.it/200x200" alt="" class="image" /> 
 
    <img src="http://placehold.it/300x600" alt="" class="image" /> 
 
</div>

希望這有助於！

Answer 2

這裏是codepen和摘要使用Flex :(http://codepen.io/dpes/pen/MbeBbd）

.flex-container{ 
 
    display:flex; 
 
    align-items: flex-start; 
 
} 
 
.flex-container img { 
 
    object-fit: contain; 
 
    max-height: 300px; 
 
    min-height: 300px; 
 
}

<div class="flex-container"> 
 
    <img src="http://lorempixel.com/400/500/"> 
 
    <img src="http://lorempixel.com/500/400/"> 
 
</div>