Question

我一直在搜索，但是找不到可以在我的情况下工作的解决方案。我试图使用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;
}

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

我需要一种能够按比例裁剪，居中和调整图像的解决方案。

任何想法？

Answer 1

如果您使用的图像尺寸为80x80，那么您必须将该图像上的类用作：

 .img-circle {

        border-radius:500px;
        -moz-border-radius:500px;
        -webkit-border-radius:500px;

        }


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

Answer 2

您只需使用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>

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

使用PHP图片网址的中心圈：

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

作物 - 规模 - 中心和将图像放入圆形缩略图中

3 个答案: