博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 实现圆形头像
阅读量:5806 次
发布时间:2019-06-18

本文共 456 字,大约阅读时间需要 1 分钟。

1、方法一

直接设置img为圆形,这种情况下如果图片不是正方形,图片会被拉伸

相应的css为

.circleImg{  border-radius: 30px;  width:60px;  height:60px; }

boder-radius为图片宽度的一半

2、方法二

通过背景图设置

相应的css为 

.bgImg{   border-radius: 30px;  width:60px;  height:60px;   background: url("../img/photo/img.jpg") no-repeat center;  background-size:60px;}

拖图片不是方形,则按照宽度等比例显示,则background-size设置为图片宽度,高度为auto,若需要按照高度等比例显示,则background-size:auto 60px;

显示效果为

 

  

转载于:https://www.cnblogs.com/lhyhappy365/p/9306138.html

你可能感兴趣的文章
[分享]Ubuntu12.04安装基础教程(图文)
查看>>
[Vim] 搜索模式(正则表达式)
查看>>
#HTTP协议学习# (二)基本认证
查看>>
Android开发之线性布局详解(布局权重)
查看>>
WCF
查看>>
remoting方式
查看>>
django 目录结构修改
查看>>
win8 关闭防火墙
查看>>
Android实例-录音与回放(播放MP3)(XE8+小米2)
查看>>
CSS——(2)与标准流盒模型
查看>>
MYSQL 基本SQL语句
查看>>
C#中的Marshal
查看>>
linux命令:ls
查看>>
Using RequireJS in AngularJS Applications
查看>>
hdu 2444(二分图最大匹配)
查看>>
shell编程笔记六:实现ll命令
查看>>
【SAP HANA】关于SAP HANA中带层次结构的计算视图Cacultation View创建、激活状况下在系统中生成对象的研究...
查看>>
[nodejs] nodejs开发个人博客(五)分配数据
查看>>
《Linux内核修炼之道》 之 高效学习Linux内核
查看>>
Java数据持久层框架 MyBatis之API学习九(SQL语句构建器详解)
查看>>