How to transform a rectangular image into a circle (without distorting it)

I put the image inside a container, adding a fixed size and border-radius . Then I set the image itself inside this container with transform .

.round-container {
    width: 17rem;
    height: 17rem;
    align-self: center;
    border-radius: 100%;
    margin: 2.3rem auto 2.5rem auto;
    overflow: hidden;
    position: relative;
}
.round-container img {
    width: initial;
    height: inherit;
    max-width: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

<h1><span>ice dream</span></h1>

<figure>
  <div class="round-container">
  <img src="http://static.tumblr.com/bdf78d98740c3a8962814afcaa5ea1c6/3zeuwsd/PnYmw7l78/tumblr_static_icecream.jpg"></div><figcaption>Loremipsumdolorsitamet,onsecteturdispiscing</figcaption></figure>

Thesamecodein codepen .

There are several ways to do it, as practically everything that involves html and css.

The problem with your case is that your image does not have the same height and width value, but you force it to set the height and width properties. As a result the image will be "stretched". Three possible solutions are:

• edit the image so that the height and width have the same value.

• Create a wrapper element containing the properties that form the element (height, width, border) and make the inner element (an image) 100% of the height of the parent element.

  .img-wrapper {
    height: 12rem;
    width : 12rem;
    
    border-radius: 50%;
    overflow: hidden
  }
  
  .img-wrapper > img {
    height: 100%
  }

  <div class='img-wrapper'>
    <img src='http://vidafit.com.br/wp-content/uploads/2014/11/cafe-coracao-776x517.jpg'>
  </div>

• set the image url in the background property and use background-size: cover to make the background image "cover" the entire space of the element.

  .image {
    height: 12rem;
    width : 12rem;
    
    border-radius: 50%;
    background-image: url(http://vidafit.com.br/wp-content/uploads/2014/11/cafe-coracao-776x517.jpg);
    background-size: cover
  }

  <div class='image'></div>

The way I found it was to center the image inside a rectangular div, put inside a square div, pull left half the leftover, and finally hide the overflow and round out the parent div of all:

.posts .posts-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5rem;
  background-position: center center;
}
figure img {
  width: auto;
  height: 12rem;
}
.round-container {
  overflow: hidden;
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
}
.c {
  position: relative;
  width: 24rem;
  left: -6rem;
  text-align: center;
}

<a href="" class="posts-item">
  <div class="title">Conheça a lista dos melhores cafés</div>
  <figure>
    <div class="round-container">
      <div class="c">
        <img src="http://vidafit.com.br/wp-content/uploads/2014/11/cafe-coracao-776x517.jpg"alt="">
      </div>
    </div>
    <figcaption>Lorem ipsum dolor sit amet, onsectetur dispiscing</figcaption>
  </figure>
</a>

You can use the clip-path property, but note that it has a not so good .

img {
  width: 350px;
  height: 300px;
}

.circle {
  clip-path: circle(150px at center);
  -webkit-clip-path: circle(150px at center);
}

<img src="http://vidafit.com.br/wp-content/uploads/2014/11/cafe-coracao-776x517.jpg"alt="" class="circle">

Notice that I'm prefixing the property, which is yet another sign of how it is not so adopted. You should obviously adjust the dimensions of the image and clipping for your needs.

Here has a very cool clips generator with various formats.