縮放圖像並將它們連成一排

Question

我有一個max-width的1400px包裝。在這div是兩個img元素寬度不同的大小。我想用flexbox將它們連成一排。他們應該適合在1400像素寬度，仍然看起來不錯，所以他們必須像圖片中縮放（紅色邊框是與1400像素max-width div）。我該如何解決這個問題？我希望這很清楚。

.wrapper { 
 
    display: flex; 
 
    max-width: 1400px; 
 
    margin: 0 auto; 
 
    border: 1px solid black; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    display: block; 
 
}

<div class="wrapper"> 
 
    <img src="https://dummyimage.com/hd1080"> 
 
    <img src="https://dummyimage.com/vga"> 
 
</div>

Answer 1

你可以用圖像內div和調整柔性屬性，以使這樣一個比另一個更大：

.wrapper { 
 
    display: flex; 
 
    max-width: 1400px; 
 
    width:100%; 
 
    margin: 0 auto; 
 
    border: 1px solid red; 
 
} 
 
.first { 
 
    height:300px; 
 
    flex:2; 
 
    position:relative; 
 
    border:1px solid #000; 
 
} 
 
.second { 
 
    height:300px; 
 
    flex:1; 
 
    position:relative; 
 
    border:1px solid #000; 
 
} 
 

 
img { 
 
    position:relative; 
 
    height:100%; 
 
    width:100%; 
 
}

<div class="wrapper"> 
 
    <div class="first"> 
 
    <img src="https://dummyimage.com/hd1080"> 
 
    </div> 
 
    <div class="second"> 
 
    <img src="https://dummyimage.com/vga"> 
 
    </div> 
 
</div>