如何用CSS实现圆形图像

　　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;
}

标签： css

赏

选择打赏方式

微信 支付宝 QQ钱包

打赏

打赏

打赏