缩放图像并将它们连成一排

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>