等宽不等高布局（利用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%; // 这个属性就能实现正方形布局
}
