Trouble making profile pic scale with page

Trouble making profile pic scale with page
0.0 0


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!


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.


pen: [ ]

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:

  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