html - 缩放图像并将它们 float 成一行

Question

我有一个 max-width 为 1400px 的包装器。在这个 div 中有两个宽度不同的 img 元素。我想使用 flexbox 将它们连续 float 。它们应该适合 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 中并调整 flex 属性，使一个比另一个大，如下所示:

.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>