52.css-保持盒子纵横比

前端时间面试官问我
q:会不会做响应式开发,
a:我想这个做的很多啊,便回答一般使用媒体查询,flex,grid,栅格来做,
q:"那么现在需要一个盒子长宽保持比例缩放怎么实现?额,好像上面的都是调整宽度响应式的,高度的话用好像不行,那么js监听resize事件,去调整盒子高度. a:用js的话,如果用户一直缩放的话,一直触发事件,修改盒子大小,浪费性能,能只用css实现吗
q:想了想,那就媒体查询吧,根据不同的结果修改盒子的宽高,
a:媒体查询用户体验感其实并不好,还有其它解决办法吗
这把我问懵逼了啊,主要是我也没接触过啊这样的业务啊,原谅我知识面太窄了,认栽,后来查了下资料,发现解决办法还挺多的,这里主要列举2种.

利用定位实现

  <style>
    .wrapper {
      position: relative;
      background: #ccc;
      width: 20%;
      padding-bottom: 20%;
    }

    .inner {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  </style>
  
    <div class="wrapper">
    <div class="inner">
      这是内容这是内容这是内容
    </div>
  </div>

padding-bottom 是相对宽度的.也就是整个Wrapper的高度等于padding-bottom 的高度,Wrapper 没有内容高度.没有内容高度如何往其中放置我们准备的div呢?答案是 绝对定位, 所以Wrapper的样式中有position:relative, 方便子元素相对Wrapper的左顶点定位.

aspect-ratio

c3的属性aspect-ratio直接就是盒子的宽高比.

    .wrapper {
      position: relative;
      background: #ccc;
      width: 20%;
      /* 方案1 */
      /* padding-bottom: 20%; */
      /* 方案2 宽高比 后面写比列 这里是1 : 1*/
      aspect-ratio: 1/1;
    }

这个属性需要考虑一下兼容性