Perfect Responsible Circle on an image

Question

I almost got the perfect responsible circle, just the height of the image not touching the edge >< not sure which part is going wrong. Please help!

.headshot{
  background: yellow;
  border-radius: 50%;
  width: 100%;
  overflow: hidden;
}

.headshot img{
  width: 100%;
  height: 100%;
}

.container {
  width: 15%;
  height:auto;
  background: blue;
}

<div class="container">
<div class="headshot">
        <img src="https://placeimg.com/128/128/people">
        </div>
   </div>