CSS实现自适应固定长宽比的矩形

css实现自适应固定长宽比的矩形

需要先在内容(图片元素)外面套一层标签，并使用padding-bottom将底部撑开(100%就是正方形, 75%就是4:3的长方形), 然后内容元素使用绝对定位，配合flex布局实现自适应。

html

  <div class="box-wrapper">
    <div class="item-container">
      <div class="box-item">
        <img src="./logo.png" alt="logo">
      </div>
    </div>
    <div class="item-container">
      <div class="box-item">
        <img src="./logo.png" alt="logo">
      </div>
    </div>
    <div class="item-container">
      <div class="box-item">
        <img src="./logo.png" alt="logo">
      </div>
    </div>
    <div class="item-container">
      <div class="box-item">
        <img src="./logo.png" alt="logo">
      </div>
    </div>
  </div>

css

    .box-wrapper {
      width: 100%;
      margin: 100px auto;
      display: flex;
      justify-content: space-between;
    }
    .item-container {
      width: 22%;
    }
    .box-item {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      padding-bottom: 100%;
      border: 1px solid pink;
    }
    .box-item img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

来源自书《精通CSS》第5章, 内容<img></img>是最常用的, iframe元素也可以用这种方法。