固定宽高容器中显示图片并保持图片的原有比例

前端开发中不免会出现需要在一个固定宽高的容器里显示图片，还需要图片保持原有比例的场景，如下图：

可以这样实现这种效果：

<div class="img">
	<img src="../images/a.jpg" alt="" />
</div>
.img {
      width: 64px;
      height: 64px;
      background: #c3c3c3;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-inline-end: 20px;
      
      img {
        max-width: 100%;
        max-height: 100%;
      }
    }

后续发现更简单的方法了，css本身就支持图片的填充效果
可参考object-fit
需要注意的是img标签同样要设置宽高为100%