面试问题：

给不同大小比例的八张图片，四个一排，放两排，实现固定16：9的比例。

aspect-ratio

CSS 属性 aspect-ratio 为盒子规定了首选纵横比，这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

MDN：aspect-ratio - CSS：层叠样式表 | MDN (mozilla.org)

解题代码：

<div class="box">
      <div class="row">
        <div class="b1">
          <img class="m1" src="./img/1.jpg">
        </div>
        <div class="b2">
          <img class="m2" src="./img/2.jpg">
        </div>
        <div class="b3">
          <img class="m3" src="./img/3.jpg">
        </div>
      </div>
      <div class="row2">
        <div class="b4">
          <img class="m4" src="./img/4.jpg">
        </div>
        <div class="b5">
          <img class="m5" src="./img/5.jpg">
        </div>
        <div class="b6">
          <img class="m6" src="./img/6.jpg">
        </div>
      </div>
    </div>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.row,
.row2 {
    display: flex;
    div {
        flex: 1;
        margin: 5px;
        aspect-ratio: 3/2;   //固定纵横比
        img {            
            width: 100%;
            height: 100%;
            object-fit: cover;  //设置图片显示裁剪类型
        }
    }
}