css3,如何保证内部元素宽高比固定居中缩放?

Question

需求是，一个外部div包住内部div，内部div固定宽高比，比如为4:3，外部div的宽高完全未知。
内部div一定要居中并且放大到最大，要么宽度撑开要么高度撑开直到贴边。
简单点来说就是如果外部div的宽高比>4:3，就把内部div放大到高度与外部div一致，反之则是宽度一致。
用js我知道怎么写，想知道用css(也可以是less)怎么写

Answer 1

https://jsrun.net/34FKp/edit

<style>
    .outer {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #aaa;
    }

    .inner {
        aspect-ratio: 4 / 3;
        max-height: 100%;
        max-width: 100%;
    }
</style>

<div class="outer">
    <img class="inner" src="https://www.isanxia.com/zb_users/upload/2020/10/202010301604026617513960.jpg" />
</div>

Answer 2

<div class="outer">
  <div class="inner"></div>
</div>

CSS:

.outer {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  position: absolute;
  width: 100vw;
  height: 75vw;  /* 保持 4:3 的宽高比 */
  max-width: 100%;
  max-height: 100%;
}

Answer 3

div.inner {
    aspect-ratio:4/3; /* 固定宽高比用 aspect-ratio */
    width：100%;
}