作物-规模-中心&；将图像放入圆形缩略图中 - crop - scale - center & fit an image into a round thumbnail

crop - scale - center & fit an image into a round thumbnail

我一直在到处寻找，但就是找不到适合我的解决方案。我正在尝试使用CSS解决方案，不幸的是，我不知道如何实现jquery，但也许有人可以为我指明正确的方向。

我有以下图片作为示例：http://pho.to/8rURy

这张图片很容易解释，我需要居中、裁剪图像并将其放入缩略图中，缩略图为80px x 80px

目前我被困在以下CSS上：

/* Image container */
.profile-img {
width: 90px;
height: 90px;
margin-left: auto;
margin-right: auto;
text-align: center;
padding-top: 15px;
}
/* Image placed in the image container - there is a border around the image, but created as a background */
.profile-img img {
width: 80px;
height: 80px;
padding: 5px !important;
background: #fff !important;
border: none !important;
border-radius: 999px !important;
}

这里的问题是图像适合容器，但是它被拉伸（确切地说是收缩）以适合容器。

我需要一个可以按比例裁剪、居中和拟合图像的解决方案。

有什么想法吗？？

如果您使用的图像大小为80x80，则必须将该图像上的类用作：

 .img-circle {
        border-radius:500px;
        -moz-border-radius:500px;
        -webkit-border-radius:500px;
        }

<img src="your image path" class="img-circle />"

您可以简单地使用CSS属性border-radius将您的个人资料图像做成一个圆圈。

.profile-img > img {
    border: 5px solid #fff;
    border-radius: 9999em;
    height: 80px;
    width: 80px;
}
/*Not necessary,  so you can see the white border */
body { background: #CCC; }

<div class="profile-img">
    <img src="http://placehold.it/80x80" alt="" />
</div>

您可以将图像设置为背景图像，并将其放置在中心位置。这样，图像将被裁剪而不是缩放。

.profile-img {
    width:         80px;
    height:        80px;
    border-radius: 999px;
    background-color:    #ccc;
    background-position: center center;
}

<h3>Full images 1 and 2:</h3>
<img src="http://placekitten.com/g/250/250">
<img src="http://placekitten.com/g/200/150">
<h3>Center circle 1:</h3>
<div class="profile-img"
     style="background-image: url('http://placekitten.com/g/250/250')">
</div>
<h3>Center circle 2:</h3>
<div class="profile-img"
     style="background-image: url('http://placekitten.com/g/200/150')">
</div>

带PHP图像URL:的中心圆

<div class="profile-img"
    style="background-image: url('<?php
        echo $user_meta['profilepicture'][0];
    ?>')">
</div>