CSS的小技巧

等宽不等高布局（利用flex布局和object-fit这个属性）

<body>
    <section>
        <div>
            <img src="./images/01.jpeg" alt="">
        </div>
        <div>
            <img src="./images/02.jpeg" alt="">
        </div>
        <div>
            <img src="./images/03.jpeg" alt="">
        </div>
        <div>
            <img src="./images/04.jpeg" alt="">
        </div>
        <div>
            <img src="./images/05.jpeg" alt="">
        </div>
        <div>
            <img src="./images/06.jpeg" alt="">
        </div>
        <div>
            <img src="./images/07.jpeg" alt="">
        </div>
        <div>
            <img src="./images/1.png" alt="">
        </div>
        <div>
            <img src="./images/2.png" alt="">
        </div>
        <div>
            <img src="./images/3.png" alt="">
        </div>
        <div>
            <img src="./images/4.png" alt="">
        </div>
        <div>
            <img src="./images/5.png" alt="">
        </div>
        <div>
            <img src="./images/6.png" alt="">
        </div>
        <div>
            <img src="./images/7.png" alt="">
        </div>
    </section>
</body>

section{
   display:flex;
   flex-wrap:wrap;
}
section::after{ // 为了解决最后一行因为flex-grow：1 拉伸的问题
  content: ' ';
  flex-grow: 999999999;   
}
div{
  flex-grow:1;
  margin:2px;
  background-color: grey; 
}
img{
 object-fix: cover; // 等比例缩放
 height: 200px;
 min-width:100%;
 vertifical-align:bottom;
}

object-fit几个属性的值.png

image.png

// 正方形布局

       section{
          display: flex;
          flex-wrap: wrap;
        }
        div{
            width: 200px;
            margin: 5px;
            background-color: blue;
            flex-grow: 1;
        }
        div::after{
            content: '';
            display: block;
            padding-bottom: 100%; // 这个属性就能实现正方形布局
        }

CSS的小技巧

推荐阅读更多精彩内容