缩放图像并将它们连续浮动

Question

我有一个max-width 1400px的包装器。在此div中，两个img元素的宽度不同。我想使用flexbox将它们连续浮动。它们应该适合1400px宽度并且仍然看起来很好，所以它们必须像图片中那样缩放（红色边框是具有1400px 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内并调整flex属性，使其比另一个更大：

＆＃13;

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;