Image border-radius

Im creating android application with the help of ionic famework. Im having this problem with the UI. Im using lists in ionic to show the today's deals given by the shops.

Im making the thumbnails as round by the property border-radius:100% , but when a rectangle image is placed my thumbnail is messed up. Its good when i use sqare images. But im creating this application which have to support all shaped images. Find the screenshot below to know how rectangle image is responding with border-radius:100%

enter image description here

I want to get my thumbnails round in shape without being stretched. Image of expected list is given below enter image description here

Is there any way to make the thumbnail in ionic framework as round ?

<div class="list">

    <!--.....................loop........................................................-->
            <a class="item item-icon-right item-thumbnail-left" href="#">

                <img style="border-radius: 100%;"  src="img/sample.jpg">
                <h2>HEADINGG</h2>
                <p>Details : Hey guys i saw that there was no thread for p300, so i decided to make one (this is the support and development thread) Do this at your own risk 1=Root your funbook It is rooted but sometimes it is not rooted so you must visit this page</p>
                <i class="icon ion-chevron-right stable"></i>
            </a>            
    <!--.....................loop........................................................-->    
        </div>

I think i have to do something with the CSS . I dont know what to do.

It's better to crop the square part of your images which you would like to display in your page in a circular-shape. That's because border-radius:100%; works like a charm for square-shaped images.

Here's a Live DEMO !

try using only avatar

it seems avatar css something like this,

.avatar {
    border-radius: 95px;
}

<img class="avatar"  src="img/sample.jpg">

also I guess u need remove thumnail clases u can edit here

Fact: Only square objects will be rendered as a circle with CSS border-radius: 100% or 50%.

So you have to give the image itself the same width and height.

...or I just didn't understand your problem^^