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

Question

As shown in the image below, I can make the picture rectangular turn round, but it gets distorted:

.posts .posts-item img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5rem;
  background-position: center center;
}
.posts.round .round-container img {
  width: auto;
  height: 100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
figure img {
  border-radius: 100%;
  width: 12rem;
  height: 12rem;
}

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

Does anyone know how to solve this for any image I put?

Answer 1

There are several ways to do it, like virtually everything that involves html and css.

The problem in your case is that your image does not have the same height and width value, but you force it to have when defining the properties height and width. Consequently the image will be "stretched". Three possible solutions are:

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

• create an element wrapper containing the properties that shape the element (height, width, border) and make the internal element (an image) 100% of the parent element’s height.

  .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 property background and use background-size: cover to make the background image "cover" the whole 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>

Answer 2

The way I found was to center the image inside a rectangular div, place it inside a square div, pull half the leftover left, and finally hide the overflow and round the father 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>

Answer 3

I placed the image inside a container, adding a fixed size and the border-radius. Then I adjusted the image itself inside that container with the 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>
    Lorem ipsum dolor sit amet, onsectetur dispiscing
  </figcaption>
</figure>

The same code on codepen.

Answer 4

You can use the property clip-path, but see that she has a support 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">

Note that I’m prefixing the property, which is another sign that she’s not that adopted. You should obviously adjust the dimensions of the image and the clipping for your needs.

Here has a generator of clips well cool, with several formats.