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

我只想在我的网站上制作“个人资料图片”。我只是不知道如何在不使图片拉伸或像素化的情况下完美生成它，这是我使用引导程序作为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;">

最佳答案

尝试一下，我们可以围绕CSS发挥任何风格...

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

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