Question

我只想在我的网站上制作“个人资料图片”。我只是不知道如何完美地生成它而不使图片拉伸或像素化这里是我的示例代码，就像我使用bootstrap作为我的css框架。

<div class="center-block" style="background-image:url(img/1.jpg);
            width: 200px;
             height: 200px;
             background-size: cover;
             display: block;
             border-radius: 100px;
             -webkit-border-radius: 100px;
             -moz-border-radius: 100px;">

Answer 1

<强> HTML

<div class="center-block"></div>

<强> CSS

.center-block{background-image:url(http://b-i.forbesimg.com/assets/images/avatars/generic_profile_image_400.jpg);
            width: 20px;
             height: 20px;
             background-size: cover;
             display: block;
             border-radius: 100px;
             -webkit-border-radius: 100px;
    -moz-border-radius: 100px;}

example

Answer 2

试试这个我们可以围绕CSS制作任何风格...

＆＃13;

div {
    float: left;
    margin: 5px;
}
.profile_1 {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
}
.profile_1 img {
    max-width: 120px;
    max-height: 120px;
}
.profile_2 img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: solid 3px #000;
}
.profile_3 img {
    width: 120px;
    height: 120px;
    border-radius: 10px;
    border: solid 3px #fff;
    box-shadow: 0 0 3px 2px #ccc;
}

＆＃13;

<div class="profile_1">
    <img src="http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png" alt="profile" />
</div>
<div class="profile_2">
    <img src="http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png" alt="profile" />
</div>
<div class="profile_3">
    <img src="http://www.sheffield.com/wp-content/uploads/2013/06/placeholder.png" alt="profile" />
</div>

＆＃13;

用于Facebook和其他社交媒体的图像CSS

2 个答案: