Image inside of round div

Question

I have a div block with height and width of 55px and border-Radius: 100%; and I want to put an image inside, but if the image is rectangular and I leave it with border-Radius: 100%; it is oval! There’s a way for the div to overlay the image and cover the outside of the circle like this :

Even if the image is half rectangular, without the distortion ? I understand that the div should superimpose the image, in the ending thus :

From now on, thank you!

Answer 1

Defining the overflow of div as Hidden it is possible to do this without using the image as background.

If the image does not fit proportionally in the div set a background color for the image does not get cropped

.round {
    border-radius: 100%;
    overflow: hidden;
    height: 100px;
    width:100px;
    background: black;
}

img {
    width: 100%;
}

<div class="round">
    <img src="http://www.wingspan.co.nz/images/raptor.jpg" />
</div>

Answer 2

Considering that the image dimensions will always be the same, try as follows:

.img-arredondada {
  border-radius: 50%;
  background-position: -15px -15px;
  height: 195px;
  width: 195px;
}

<div class="img-arredondada" style="background-image: url(http://i.stack.imgur.com/AyzfI.jpg)"></div>

The border-radius rounded leaves.
The background-position ignores the top track, starting the image where it matters.
The height along with the width make ignore lower band, ending the image at the right point.