CSS 比例布局使用aspect-ratio 但是该方案不兼容很多浏览器优化方案-----------------

使用aspect-ratio 但是该方案不兼容很多浏览器

<div class="item"></div>
<style>
  .item {
    background-color: red;
    width: 50%;
    margin: 0 auto;
    aspect-ratio: 4/3;
  }
</style>

优化方案

  <body>
    <div class="item">
      <div class="inner">
        <div class="con"></div>
      </div>
    </div>
    <style>
      .item {
        background-color: red;
        width: 50%;
        margin: 0 auto;
      }
      .inner{
        width: 100%;
        /* padding-bottom: 75%; */
        padding-top: 75%;
        /*此时该元素的height为0 那么怎么往里面装东西呢 可以使用position*/
        position: relative;
      }
      .con{
        position: absolute;
        inset: 0; /*撑满*/
        background-color: yellow;
      }
    </style>
  </body>