CSS代码：
ul {
padding: 0; margin: 0;
list-style-type: none;
width: 240px; height: 240px;
background-color: #eee;
}
li {
background: url(https://image.zhangxinxu.com/image/study/head/s180/14.jpeg);
background-size: 100%;
outline: 1px solid #fff;
}
/* 1个 */
li:only-child {
height: 100%;
}
/* 2个 */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) + li {
width: 50%; height: 50%;
}
li:first-child:nth-last-child(2) + li {
margin-left: auto;
}
/* 3个 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 50%; height: 50%;
}
li:first-child:nth-last-child(3) {
margin: auto;
}
li:first-child:nth-last-child(3) ~ li {
float: left;
}
/* 4个 */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
width: 50%; height: 50%;
float: left;
}
/* 5个和6个 */
li:first-child:nth-last-child(5),
li:first-child:nth-last-child(6) {
width: 160px;
height: 160px;
float: left;
}
li:first-child:nth-last-child(5) ~ li,
li:first-child:nth-last-child(6) ~ li {
width: 80px;
height: 80px;
float: left;
}
/* 7个 8个 9个 */
li:first-child:nth-last-child(7),
li:first-child:nth-last-child(8),
li:first-child:nth-last-child(9),
li:first-child:nth-last-child(7) ~ li,
li:first-child:nth-last-child(8) ~ li,
li:first-child:nth-last-child(9) ~ li {
width: 80px;
height: 80px;
float: left;
}
li:first-child:nth-last-child(7) {
float: none;
margin: auto;
}
li:first-child:nth-last-child(8) {
margin-left: 40px;
}
HTML代码：
<h4>1个头像</h4>
<ul><li></li></ul>
<h4>2个头像</h4>
<ul><li></li><li></li></ul>
<h4>3个头像</h4>
<ul><li></li><li></li><li></li></ul>
<h4>4个头像</h4>
<ul><li></li><li></li><li></li><li></li></ul>
<h4>5个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li></ul>
<h4>6个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<h4>7个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<h4>8个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
<h4>9个头像</h4>
<ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul>
