一、案例说明
1.关于圆角头像,一般来说都是有一个圆形盒子,不管里面插入的是什么图,显示出来都是圆形的。 这时候把外面的盒子设置好,给里面的图片设置width:100%;height:100%;重要的是别忘记给外面的盒子加overflow:hidden;
2.细节:没有的头像的时候有个框显示着,表示此处有东西。
二、案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.touxiang{ width:50px; height:50px; border-radius:50%; overflow:hidden;border: 3px solid #ccc;}
.touxiang img{ width:100%; height:100%;object-fit: cover;}
</style>
</head>
<body>
<div class="touxiang">
<img src="img/1111.png" />
</div>
</body>
</html>