Trouble making profile pic scale with page

Code Feedback
1

I created a circular image from a rectangular one and now would like it to shrink as the window gets smaller. However, only the mask seems to scale. How would I go about doing this? Thanks!
http://codepen.io/cmorganwilson/pen/BLRmgZ

2

HI! your image seems to shrink the right way… What was the trouble? Anyhow, since you have used Bootstrap for other things, instead of using the border-radius you should add the img-circle class to your image, and you can also manage its responsiveness with the bootstrap grid.

3

pen: [ http://codepen.io/anon/pen/pEqrEk?editors=1100 ]

Do u want something like this?

Things changed:

For ur name in navbar added query that when screen width is less then 280px font size will decrease
line 26:

@media only screen and (max-width: 280px){
  .navbar-default .navbar-brand {
    font-size: 0.8em;
  }
}

Then i changed ur components for .summary:

.summary{
  background-color: #64B5B7;
  padding-top: 100px; 
}


.summary img{
  max-width: 200px;
  width: 30%;
  min-width: 110px;
  margin: 0 auto;
  
  height: auto;
  border-radius: 50%;
  display: block ;
}

.summary h1{
  display: block ;
  margin-bottom: 100px;
  text-align: center;
  font-size: calc(2vw + 2vh + 1vmin);;
}

If u need help about what going here ask