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

Question

我只想在我的网站上制作一个“个人资料图片”。我只是不知道如何在不使图片拉伸(stretch)或像素化的情况下完美地生成它这里是我使用 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

试试这个，我们可以使用 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>