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

Question

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

Answer 1

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

Answer 2

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 3

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