首页 > Web开发 > 详细

css3圆形头像(当图片宽高不相等时)

时间:2015-11-27 16:44:53      阅读:313      评论:0      收藏:0      [点我收藏+]

1。图片宽高相等,width:300px; height:300px; 把他变成宽高100px的圆形头像

img{width:100px; height:100px; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;}

2。图片宽高不相等 width:400;height:600px;

利用百分比让头像响应式

解决方式:给图片外面先包围一个div,先把div变成圆角然后让图片百分百的填充

<div class="imgheadborder">
<img class="imghead" src="images/thumsb/thumsb_pic2.jpg" />
</div>

css代码:

.imgheadborder{ width:10.9%; padding-top:10.9%; margin-right:2.8%; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%; position:relative;}
.thumsbcount .imghead{position:absolute;left:0px;top:0px; border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%; width:100%;height:100%;z-Index:-1;}

 

css3圆形头像(当图片宽高不相等时)

原文:http://www.cnblogs.com/hfxm/p/5000649.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!