CODEWITHSUNDEEP
javascripthtmlcss
Diogo Sequeira
Diogo Sequeira

Reputation: 126

How can I display an image full size inside of a CSS circle?

I tried to put an image inside a circle as presented below, but it appears to be shrunken. What changes I should make to the code? 

<!doctype html>
<html>
  <head>
    <style>
      #circle {
        background: skin-tone.jpg;
        background-size: cover;
        border-radius:50% 50% 50% 50%;
        width:400px;
        height:400px;
      }
    </style>
  </head>
  <body>
    <img src="http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg" id="circle">
  </body>
</html>

Upvotes: 1

Views: 240

Answers (2)

Neil
Neil

Reputation: 968

The reason is that your image is not exactly the size of the shape (400px * 400px).

If your image is never going to be correct then I would do the following:

.circle {
  position: relative;
  border-radius: 100%;
  width:400px;
  height:400px;
  overflow: hidden;
}

.circle__image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
}
<!doctype html>
<html>
  <body>
    <div class="circle">
      <img class="circle__image" src="http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg" title="skin tone">
    </div>
  </body>
</html>

Personally, I would try and get the image the same the same size as the parent clipping mask. However, life is not like that. This code will auto-fill the container. Based height, not the width.

The translate3d will always the image centre.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 272807

You can use the image as a background instead:

#circle {
  background-size: cover;
  background-position:center;
  border-radius: 50% 50% 50% 50%;
  width: 400px;
  height: 400px;
}
<div style="background-image:url(http://conversationsabouther.net/wp-content/uploads/2014/12/cara-delevingne.jpg)" id="circle"></div>

Upvotes: 2

Related Questions