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

Question

I've been searching all over, but just cannot find a solution that could work in my case. I am trying to use CSS solution for this, I don't know how to implement jquery unfortunately, but maybe someone could point me to the right direction.

I have the following images as an example : http://pho.to/8rURy

That picture is quite self explanatory, I need to center, crop and fit the images into the thumbnail that is 80px x 80px

Currently I am stuck on the following 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;
} 

The problem here is that the image fits into the container, however it is stretched ( shrunk to be exact ) to fit the container.

I need a solution that would crop, center and fit the image proportionally.

Any ideas ??

Answer 1

if u are using image size 80x80 then you have to use the class on that image as:

 .img-circle {

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

        }


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

Answer 2

You can simply use the CSS attribute border-radius to make your profile images into a circle.

 .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

You can make the image a background image and place it center/center. This way the image will be cropped and not scaled.

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

Center circle with PHP image URL:

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