# css实现固定宽高比

对于经验丰富的前端来说，看到UI图的设计效果，肯定不会按部就班，直接写死尺寸，而是理解UI设计的思路，思考UI设计师想要的效果，然后再进行页面设计。我们经常会遇到，一行卡片，四等分，或者几等分，然后宽高比固定，但是宽度不固定跟随屏幕宽度大小自适应的情况。这时如果我们还是按照高度写死的话，就会使元素变形，很难看，UI验收肯定也是不过的。这就需要我们掌握如何使用CSS实现宽高比固定的技能。

# 请看如下示例

宽高比1:1(正方形)

爆米花小布

宽高比16:9(观看视频)

以上部分需要上下左右居中对齐，部分左对齐。需要根据内容来自适应高度，整块相对来说对CSS的要求还是比较高的。如有类似的可来这里参考。

<template>
  <div class="fixed-aspect-ratio">
    <div class="title">宽高比1:1(正方形)</div>
    <div class="brand-list">
      <div class="brand" v-for="item in 4" :key="item">
        <div class="brand-img-box">
          <img class="brand-img" :src="require(`../../public/imgs/CSS/${item}.png`)" alt="" />
        </div>
        <p class="auth">爆米花小布</p>
      </div>
    </div>

    <div class="title">宽高比16:9(观看视频)</div>
    <div class="movie-box">
      <img class="movie-img" :src="require(`../../public/imgs/CSS/movie.jpg`)" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: "fixed-aspect-ratio"
}
</script>

<style lang="less" scoped>
.fixed-aspect-ratio {
  .title {
    padding: 12px 0;
    padding-left: 15px;
    font-size: 24px;
    font-weight: bold;
    line-height: 32px;
    position: relative;
    color: #409eff;
    &::after {
      content: "";
      width: 5px;
      height: 24px;
      background: #409eff;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
    }
  }

  //第一个示例  1:1 百分比  正方形
  .brand-list {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #f5f7fa;
    padding: 12px;
    .brand {
      width: calc(25% - 20px);
      margin: 0 10px;
      padding: 12px;
      background: #fff;
      border-radius: 8px;
      transition: all 0.36s;
      &:hover {
        transform: scale(1.08);
        box-shadow: 0px 25px 29px 0px rgba(0, 0, 0, 0.15);
      }
      .brand-img-box {
        width: 100%;
        overflow: hidden;
        padding-bottom: 100%; //padding的百分比是相对宽度的，因此设置此属性后该 元素高度与宽度一致
        position: relative;
        .brand-img {
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }

      .auth {
        font-size: 18px;
        color: #333;
        text-align: center;
        opacity: 0.5;
        margin-top: 12px;
      }
    }
  }

  //16:9
  .movie-box{
    width: 100%;
    padding-bottom: 56%; //padding的百分比是相对宽度的，因此设置此属性后该 元素高度与宽度比为  9:16 约等于 56%
    background: black;
    position: relative;
    .movie-img{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
  }
}
</style>

# 第一个示例

第一个示例是一个品牌logo列表，每个品牌的logo形状千奇百怪，不一定是正方形的logo，但是此处明细，我们就是要设计一个正方形的容器来放置logo，然后设置图片object-fit属性为 contain，使其展示logo整块内容，且会是居中的效果。

# 第二个示例

第二个示例是实现一个宽高比为16：9的屏幕，里面展示图片，要让图片完全展示在一个容器里，和上面第一个示例一样的设置 object-fit属性为contain，然后同理设置宽高比为 16：9 ，重要属性就是 padding，position。

# 原理

原理就是利用padding属性的百分比是根据元素宽度来计算的，不设置元素高度，然后使用padding-bottom属性100%，这时候该元素就会是正方形大小了，然后需要将元素设置position定位，否则子元素会占用父元素位置，使父元素不再是正方形，需要子元素使用相对定位脱离文本流，不占用位置。具体实现代码参考上述示例。

# 总结

下次遇到需要固定宽高比的就可以来这参考一下啦。微信公众号【爆米花小布】等你来关注。

【注意】对于上述使用到的品牌logo，如有侵犯，请提前告知。

← css实现等高布局 CSS画一个三角形 →