Css responsive circle with image inside

Question

Blue div has fixed height and responsive width, inside there should be a circle image with same height.

This is what I have tried:

https://jsfiddle.net/xnkkrhnt/1/

How do I make perfect centered circle always 100% height of blue div (until blue div width because smaller than height) and image always covering full circle?

<div class="player-holder">
    <div class="player-thumb"><img src="http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg"/></div>
</div>

Answer 1

If you want a perfect circle firts your image needs to be square example 300x300 or 500x500, but your image is 360x270, for that reason you have getting a oval.

If you can't make that image a square, you can create a div with dimensions like square, here the example:

HTML

<div class="player-holder">
  <div class="player-thumb"></div>
</div>

CSS

.player-holder{
   height:350px;
   max-width:650px;
   background:blue;
   text-align: center;
}
.player-thumb{
   width: 350px;
   height: 350px;
   display: inline-block;
   border-radius: 50%;
   background-image: url(http://www.whatcar.com/car-leasing/images/vehicles/medium/100895.jpg);
   background-size: cover;
   background-position: center;
}

Here the example: https://jsfiddle.net/xnkkrhnt/5/

Regards