html头像裁剪仿微信,仿微信群头像css布局

css

ul,li{

list-style: none;

margin: 0;

padding: 0;

background-color: #eee;

}

ul{

width: 240px; height: 240px;

}

.li{

outline: 1px solid #fff;

display: flex;

}

/* 只有一个图片 */

.li:only-child{

height: 100%;

align-items: center;

}

/* 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%;

}

.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%;

float: left;

}

/* 5个或8个图片 */

.li:first-child:nth-last-child(5), .li:first-child:nth-last-child(5) ~ li, .li:first-child:nth-last-child(8), .li:first-child:nth-last-child(8) ~ li{

width: 33%;

float: left;

}

.li:first-child:nth-last-child(5),.li:first-child:nth-last-child(5)+li{

margin-top: 16%;

}

.li:first-child:nth-last-child(5), .li:first-child:nth-last-child(8){

margin-left: 15%;

}

/* 6个图片 */

.li:first-child:nth-last-child(6), .li:first-child:nth-last-child(6) ~ li{

width: 33%;

float: left;

}

.li:first-child:nth-last-child(6), .li:first-child:nth-last-child(6) + li, .li:first-child:nth-last-child(6) + li + li{

margin-top: 16%;

}

/* 7个图片 */

.li:first-child:nth-last-child(7), .li:first-child:nth-last-child(9), .li:first-child:nth-last-child(7) ~ li, .li:first-child:nth-last-child(9) ~ li{

width: 33%;

float: left;

}

.li:first-child:nth-last-child(7){

float: none;

margin: auto;

}

html

• 

• 

• 

• 

• 

部分效果图：