首页 > 技术文章 > css图片宽度设置百分比,怎么让高度和宽度相等

yhhBKY 2020-10-13 13:56 原文

<div style="display: flex;flex-wrap: wrap;">
  <div class="box" v-for="item in 3" :key="item">
       <img src="https://img.yzcdn.cn/vant/cat.jpeg" />
  </div>
</div>                     
.box{
        width: 32%;
        margin: 0.65%;
        padding-bottom: 32%;
        height: 0;
        position: relative;
        img{
               width: 100%;
               height: 100%;
               object-fit: cover;
               border-radius: 4px;
               position: absolute;
               top: 0;
               left: 0;
      }
                
}  

数量可以自己定义,大概如下图,排序是可以换行的,flex布局一下即可

推荐阅读