CODEWITHSUNDEEP
phpcsswordpressimage
Tester
Tester

Reputation: 91

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

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

Upvotes: 0

Views: 1196

Answers (3)

mhall
mhall

Reputation: 3701

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>

Upvotes: 0

Montiyago
Montiyago

Reputation: 647

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

Upvotes: 2

Axel
Axel

Reputation: 10772

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>

Upvotes: 0

Related Questions